body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Noto Sans JP", sans-serif; background: #0c0c0c; font-weight: bold; margin: 0; padding: 10px; } .panelm { width: 900px; margin: 0 auto 4px; padding: 12px; border-radius: 6px; background: #123; color: #8eff23; text-shadow: 1px 1px 2px #000; } .panel { padding: 14px; color: #170d77; text-shadow: 1px 1px 2px #d8d8d8; } #decide-parent-btn, #deal-btn,#koi-btn, #shobu-btn,#sound-toggle-btn{ background-color: #ccc; width : 96px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(118, 37, 250); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } #decide-parent-btn:hover { background-color: rgb(83, 170, 221); } .inf{ width : 40px; padding: 10px 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(13, 16, 204); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } #reset-round-btn{ background-color: #ccc; width : 160px; padding: 10px 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(32, 158, 15); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } #reset-round-btn:hover { background-color: rgb(146, 216, 105); } #reset-game-btn{ background-color: #ccc; width : 90px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(212, 14, 169); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } #reset-game-btn:hover { background-color: rgb(83, 170, 221); } #player-round-score { color: #a1fcff; font-weight: bold; } #ai-round-score { color: #fd21f2; font-weight: bold; } #player-total-score { color: #a1fcff; font-weight: 600; } #ai-total-score { color: #fd21f2; font-weight: 600; } #round-count { color: #ffbd2e; font-weight: 600; } #current-parent-label { color: #eee127; font-weight: bold; } #control-panel { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-bottom: 10px; } #control-panel button { padding: 4px 4px; font-size: 14px; cursor: pointer; } #control-panel button:disabled { opacity: 0.4; cursor: default; } #info { min-width: 220px; text-align: left; font-size: 16px; font-weight: bold; color: #ffe9a6; } #score-info { display: flex; flex-wrap: wrap; gap: 10px; font-size: 16px; } #board { position: relative; max-width: 900px; margin: 0 auto; border: 4px solid #0c91b3; border-radius: 8px; padding: 8px; background: #123; background-image: url('images/tatami.png'); background-repeat: repeat; } #board-watermark { position: absolute; top: 10%; left: 79%; transform: translate(-50%, -50%); font-size: 120px; font-weight: bold; color: rgb(5, 14, 63); pointer-events: none; user-select: none; white-space: nowrap; opacity: 0.03; z-index: 1; } .hand-row { margin: 4px 0; color: #cc43df; font-weight: bold; text-shadow: 1px 1px 1px #000; } .hand-row2 { margin: 4px 0; color: #584edf; font-weight: bold; text-shadow: 1px 1px 1px #000; } .label.small { font-size: 14px; color: #a7180e; } .card-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 80px; } .card { width: 60px; height: 98px; border-radius: 4px; overflow: hidden; border: 1px solid #444; background: #222; position: relative; cursor: pointer; } .card img { width: 100%; height: 100%; object-fit: cover; } .card.back { background-image: url("images/backcard.png"); background-size: cover; background-position: center; } .card.disabled { pointer-events: none; } #center-area { display: grid; grid-template-columns: 1fr 2fr 3fr; margin: 8px 0; } #field-area, #captured-area { border: 2px solid #0d56f5; border-radius: 6px; padding: 6px; background: #102030; box-shadow: inset 2px 2px 3px rgba(46, 46, 46, 0.6), inset -2px -2px 3px rgba(63, 63, 63, 0.6); background-image: url('images/tatami.png'); background-repeat: repeat; } #captured-area { border: 2px solid #848605; border-radius: 6px; padding: 6px; background: #102030; box-shadow: inset 2px 2px 3px rgba(46, 46, 46, 0.6), inset -2px -2px 3px rgba(63, 63, 63, 0.6); background-image: url('images/tatami.png'); background-repeat: repeat; } #deck-area { border: 2px solid #e01cd0; border-radius: 6px; padding: 6px; width: 140px; background: #102030; box-shadow: inset 2px 2px 3px rgba(46, 46, 46, 0.6), inset -2px -2px 3px rgba(63, 63, 63, 0.6); background-image: url('images/tatami.png'); background-repeat: repeat; } #deck-stack { position: relative; width: 70px; height: 160px; overflow: visible; } .deck-card { position: absolute; width: 70px; height: 115px; border-radius: 4px; background-image: url("images/backcard.png"); background-size: cover; background-position: center; border: 1px solid #333; box-shadow: 0 1px 2px rgba(0,0,0,0.4); } #field-cards { display: flex; flex-wrap: wrap; gap: 4px; min-height: 100px; } .captured-block { margin-bottom: 4px; } .captured-row { display: flex; flex-wrap: wrap; gap: 2px; width: 400px; min-height: 40px; } .captured-row .card { width: 40px; height: 66px; cursor: default; } .turn-indicator { outline: 2px solid #ffd54f; } .message-highlight { color: #ffeb3b; font-weight: bold; } #deck-flex { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; } #parent-cards-display { display: flex; flex-direction: column; gap: 26px; align-items: center; } .parent-card-block { display: flex; flex-direction: column; align-items: center; } .parent-label { font-size: 12px; margin-bottom: 2px; color: #276300; font-weight: bold; } .parent-card { width: 60px; height: 98px; border-radius: 4px; overflow: hidden; border: 1px solid #666; background: #222; } .parent-card img { width: 100%; height: 100%; object-fit: cover; } .yaku-highlight { animation: yakuBlink 0.6s ease-in-out infinite alternate; outline: 3px solid gold; border-radius: 4px; } @keyframes yakuBlink { from { opacity: 1; } to   { opacity: 0.3; } } #yaku-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; justify-content: center; align-items: center; z-index: 9999; } #yaku-window { width: 480px; max-height: 80vh; overflow-y: scroll; background: #102030; border: 3px solid #4c7c0d; border-radius: 10px; padding: 16px; position: relative; color: #ffe9a6; } #yaku-close-btn { position: absolute; top: 6px; right: 6px; background: #c62828; color: white; border: none; font-size: 20px; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; } #yaku-window::-webkit-scrollbar { width: 16px; } #yaku-window::-webkit-scrollbar-track { background-color: #fff; } #yaku-window::-webkit-scrollbar-thumb { background-color: #3760d0; border-radius: 8px; } .yaku-item { padding: 8px 0; border-bottom: 2px dashed #fff; } .yaku-title { font-weight: bold; margin-bottom: 6px; } .yaku-cards img { width: 32px; height: auto; margin-right: 4px; border-radius: 4px; border: 1px solid #333; } #yaku-overlay.hidden { display: none; } @media (orientation: portrait) { .panelm { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } #board { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } } #settings-panelm { width: 922px; max-width: 922px; margin: 0px auto; padding: 16px; border-radius: 8px; background: #123; color: #ffe9a6; text-shadow: 1px 1px 2px #000; box-sizing: border-box; } @media (orientation: portrait) { #settings-panel { width: 100%; max-width: 100%; margin: 0 auto; } } #settings-panel-section { width: 100%; max-width: 100%; margin: 0 auto; } .settings-title { font-size: 22px; margin-bottom: 12px; color: #d8ff9c; text-align: center; } .settings-row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: nowrap; } #clear-btn { font-size: 14px; color: #fafafa; background: #ff2205; border: 1px solid #f153ea; text-shadow: 1px 1px 2px #000; } .setting-block { display: flex; flex-direction: column; min-width: 130px; flex: 1; } .setting-block label { font-size: 14px; color: #80fff4; } .setting-block input { padding: 6px 8px; border-radius: 6px; border: 1px solid #4c7c0d; background: #0f1a2a; color: #ffe9a6; font-size: 16px; box-sizing: border-box; } .setting-block input:disabled { opacity: 0.5; } .setting-block button { padding: 2px 10px; border-radius: 6px; border: 2px solid #4c7c0d; background: #1c2f4a; color: #d8ff9c; font-size: 16px; cursor: pointer; transition: 0.2s; } .setting-block button:hover { background: #2a4a6a; } .setting-block button:disabled { opacity: 0.4; cursor: default; } #result-table-section { display: none !important; display: none; max-width: 888px; margin: 6px auto; padding: 16px; background: #123; border-radius: 8px; color: #8eff23; text-shadow: 1px 1px 2px #000; border: 2px solid #0c91b3; } #result-table-section.open { display: block !important; display: block; } #result-table { width: 100%; border-collapse: collapse; font-size: 15px; } #result-table th, #result-table td { border: 1px solid #345; padding: 6px 8px; text-align: center; } #result-table tr:nth-child(even) { background: rgba(255,255,255,0.05); } #result-table tr:nth-child(odd) { background: rgba(0,0,0,0.15); } #result-table th { background: #2440bd; color: #fff; } #result-table tr:nth-child(even) { background: rgba(255,255,255,0.05); } #result-table tr:nth-child(odd) { background: rgba(0,0,0,0.15); } #result-total { margin-top: 12px; padding: 10px; background: #7613f8; border-radius: 6px; font-weight: bold; text-align: center; } #result-table-wrapper { border-radius: 12px; overflow: hidden; border: 1px solid #2a6cff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } @media (orientation: portrait) { #result-total > div { display: flex; flex-wrap: wrap; gap: 10px 20px; } #result-total > div > div { flex: 1 1 100%; } } #result-table-section { display: none; } #result-table-section.open { display: block; } #card-animation { position: absolute; top:  50%; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 50; } #card-move { width: 150px; height: 246px; animation: moveX 20s linear infinite alternate; } #card-rotate { width: 150px; height: 246px; transform-origin: center center; } @keyframes tiltRight { 0%   { transform: rotateZ(-0deg); } 33%  { transform: rotateZ(-90deg); } 66%  { transform: rotateZ(-180deg); } 100% { transform: rotateZ(-180deg); } } @keyframes moveX { 0%   { transform: rotateZ(0deg); } 50%  { transform: translateX(0deg); } 100% { transform: rotateZ(-0deg); } } @keyframes tiltLeft { 0%   { transform: rotateZ(0deg); } 33%  { transform: rotateZ(90deg); } 66%  { transform: rotateZ(180deg); } 100% { transform: rotateZ(180deg); } } #card-rotate.neon-right { box-shadow: 0 0 10px 4px rgba(3, 143, 182, 0.856); border-radius: 6px; transition: box-shadow 0.3s ease; } #card-rotate.neon-left { box-shadow: 0 0 10px 4px rgba(255, 56, 56, 0.733); border-radius: 6px; transition: box-shadow 0.3s ease; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .modal-content { background: rgb(253, 219, 253); padding: 20px 30px; border-radius: 10px; text-align: center; border: 4px solid #b30c6d; box-shadow: 0 0 20px rgba(0,0,0,0.2); } .modal-buttons button { margin: 10px; padding: 8px 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(13, 16, 204); } .big-emoji { font-size: 1.2em; vertical-align: -2px; }