:root { --bg: #101c1a; --panel: #172623; --line: #30403a; --text: #e9e9dc; --dim: #97a49b; --gold: #d1b674; --accent: #b8d1b6; --good: #b8d7a3; --bad: #e6a393; --board: 100%; }
html { scrollbar-gutter: auto; }
body { background: radial-gradient(ellipse at 35% 25%, #203c32 0, #101c1a 65%); font-size: 13px; min-height: 100vh; }
img, canvas { image-rendering: auto; }
button, select { border-radius: 5px; padding: 5px 10px; background: #20342d; border-color: #405247; transition: background .15s, border-color .15s; }
button:hover:not(:disabled) { background: #345043; border-color: #b8caaa; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #e4c784; outline-offset: 4px; }
#top { height: 84px; padding: 0 32px; gap: 20px; background: #111f1bdd; border-color: #344437; }
#mascot { display: none; }
.eyebrow { color: #b4bc9c; font-size: 10px; letter-spacing: .24em; }
h1 { font-size: 21px; letter-spacing: .12em; margin-top: 5px; font-weight: 600; }
h1 em { display: inline-block; font-style: normal; font-size: 11px; padding: 2px 6px; border: 1px solid #aa955d; color: #d5bc82; vertical-align: middle; letter-spacing: .05em; }
.edition { font-size: 10px; color: #7d9383; border-left: 1px solid #3a4b3c; padding-left: 18px; letter-spacing: .16em; }
.pixelLink { font-size: 11px; color: #afbaa8; text-decoration: none; padding: 6px; }
#viewToggle { display: none; }
#settings { z-index: 30; }
#status { padding: 12px 32px; gap: 22px; background: transparent; font-size: 11px; border: 0; }
#status .roundBadge { background: transparent; border: 0; font-size: 16px; color: #e9ddbb; }
#status .roundTrack i.current { background: #c4ab75; box-shadow: none; }
main, body.debug main { display: grid; grid-template-areas: none; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; padding: 0 28px 30px; max-width: 1680px; margin: auto; }
#tableCol, #side, #yakuSide, #leftSide { grid-area: auto; }
#top { max-width: 1680px; }
#status { max-width: 1680px; margin: 0 auto; }
#tableCol { width: 100%; min-width: 0; }
#leftSide { display: none; }
body.debug #leftSide { display: block; grid-column: 1 / -1; }
#board { width: 100%; height: clamp(440px, 51vw, 720px); background: none; overflow: hidden; border: 1px solid #3e5142; border-radius: 14px; box-shadow: 0 18px 60px #0003; }
#sceneHost { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #284339, #14261f); }
#sceneHost canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
#sceneLoading { position: absolute; left: 0; right: 0; top: 45%; text-align: center; color: #cebea0; }
#sceneHost .sceneError { margin: 0; padding: 30px; line-height: 2; }
#sceneHost a { color: #e6c981; }
.tableLabel { position: absolute; left: 24px; top: 21px; color: #c1bc9a; letter-spacing: .27em; font: 11px Georgia,serif; pointer-events: none; }
.tableLabel span { display: block; font: 8px system-ui; letter-spacing: .21em; margin-top: 5px; opacity: .6; }
.cameraControls { position: absolute; right: 15px; bottom: 16px; display: flex; border: 1px solid #59694b; border-radius: 6px; overflow: hidden; }
.cameraControls button { font-size: 10px; border: 0; border-radius: 0; background: #152b23db; color: #aab99f; padding: 7px 12px; }
.cameraControls button[aria-pressed=true] { color: #efdfb7; background: #3e5139; }
#felt { inset: 0; }
#plays, #center { display: none; pointer-events: none; }
#seats { position: absolute; inset: 0; pointer-events: none; }
.seat, .seat.pos0 { min-width: 0; width: 148px; max-width: none; display: block; border-radius: 7px; border: 1px solid #79947940; background: #101f1bd9; padding: 7px 10px; backdrop-filter: blur(8px); font-size: 10px; }
.seat.turn { border-color: #d6ba78; box-shadow: 0 0 18px #d6ba7810; }
.seat.pos0 { left: 50%; bottom: 9px; transform: translateX(-50%); width: 190px; }
.seat.pos1 { right: 10px; top: 39%; transform: none; }
.seat.pos2 { left: 50%; top: 10px; transform: translateX(-50%); }
.seat.pos3 { left: 10px; top: 39%; transform: none; }
.seat .r1 { gap: 5px; }.seat .nm { font-size: 11px; }.seat .score .sc { font-size: 23px; font-weight: 500; color: #ede7cd; }
.seat .score { gap: 3px; }.seat .score small.tl, .seat .handCount, .seat .kyokuDelta, .seat .rank { display: none; }
.seat .status { margin-top: 0; min-height: 14px; font-size: 9px; }.seat .playerMode { font-size: 8px; }.seat .badge { background: #5b5431; color: #eddba5; }
.seat.revealed { width: auto; max-width: 240px; z-index: 3; }
#banner { position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); max-width: 80%; background: #122c22eb; border: 1px solid #a68d51; border-radius: 7px; padding: 12px 24px; color: #f2e4bd; font-size: 16px; white-space: normal; box-shadow: 0 8px 30px #0005; }
#handPanel, #handPanel.overlay { margin: 0; padding: 16px 0 0; background: transparent; border: 0; position: relative; }
#handPanel .cards { display: flex; justify-content: center; gap: 9px; margin: 0; padding: 0 0 8px; position: static; transform: none; min-height: 0; }
#handPanel .card { padding: 0 0 4px; border: 0; border-radius: 7px; background: transparent; min-width: 0; width: clamp(35px, 5.1vw, 66px); display: flex; align-items: center; flex-direction: column; transform: none; transition: transform .15s; }
#handPanel .card:disabled { opacity: .7; }
#handPanel .card:hover:not(:disabled), #handPanel .card:focus-visible { transform: translateY(-7px); background: transparent; }
#handPanel .card .tag { position: static; min-height: 16px; margin-bottom: 5px; font-size: 9px; color: #cdbd8d; background: transparent; line-height: 16px; }
#handPanel .card .jk { font-size: 14px; min-height: 22px; margin-top: 8px; }.card .yk { font-size: 10px; }
.t { background-color: #f5f0df; border: 1px solid #b7ab8c; border-radius: 4px; box-shadow: 1px 3px 0 #ba8b50, 1px 5px 0 #4b382a, 2px 7px 7px #0004; image-rendering: auto; }
.t.gu { background-image: url(assets/gu.svg); }.t.choki { background-image: url(assets/choki.svg); }.t.pa { background-image: url(assets/pa.svg); }.t.fl { background-image: url(assets/fl.svg); background-color: #f2d45a; }.t.back { background-image: none; background-color: #ac7741; }
#handPanel .card .t { width: 100%; height: auto; aspect-ratio: 240/336; background-size: cover; border-radius: 6px; }
#handPanel .card:not(:disabled):hover .t, #handPanel .card:focus-visible .t { transform: none; }
#handPanel .cards { --hand-gap: clamp(3px, .65vw, 12px); gap: var(--hand-gap); }
#handPanel .cards .card { flex: 0 1 96px; width: 96px; max-width: calc((100% - 7 * var(--hand-gap)) / 8); }
.t.dora::after { border: 1px solid #d9be79; inset: -3px; border-radius: 7px; }
#handPanel .hinfo { background: transparent; border: 0; padding: 10px 8px; margin-top: 0; border-top: 1px solid #3a4c3b; }
.hinfo .hd { gap: 12px; flex-wrap: wrap; }.hinfo .hd b { font-weight: 500; }.handLegend { font-size: 10px; }.handHints { margin-top: 8px; }
#side { min-width: 0; max-width: none; width: 100%; gap: 12px; overflow: visible; }
.sideIntro { padding: 24px 2px 18px; }.sideIntro > span { font-size: 10px; color: #b7a879; letter-spacing: .22em; }.sideIntro h2 { font-size: 18px; font-weight: 500; margin: 12px 0; padding: 0; border: 0; background: transparent; letter-spacing: .06em; }.sideIntro p { font-size: 11px; line-height: 1.9; color: #a3b19e; }
#side > section, #side > details { border: 1px solid #344737; border-radius: 8px; background: #14251f99; overflow: hidden; }
#side h2, #side summary, #yakuSide h2 { background: transparent; font-weight: 500; padding: 11px 14px; border-color: #344737; }
#guide { border-left: 2px solid #b9a16a !important; }.guideTitle { font-size: 16px; }#guide .body, #lastResult .body { padding: 14px; }
#side .body { padding: 10px 14px; }#logBox .body { max-height: 160px; }
#yakuSide { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 20px; max-width: none; overflow: visible; border-top: 1px solid #344737; padding-top: 20px; }
#yakuSide > section { border: 1px solid #344737; border-radius: 8px; background: #12231e80; overflow: hidden; }#yakuSide .body { padding: 10px 14px; }
.yakuList { display: grid; grid-template-columns: 1fr 1fr; }
#tutorialPanel { border-radius: 8px; margin-bottom: 12px; background: #20362c; }#debugBar { margin-bottom: 10px; }
@media (min-width: 1550px) { #board { height: 710px; } }
@media (max-width: 1100px) { #top { padding: 0 18px; gap: 12px; }.edition { display: none; }main { grid-template-columns: minmax(0,1fr) 245px; padding: 0 14px 20px; gap: 14px; }#status { padding-left: 18px; }#board { height: 510px; }.seat,.seat.pos0 { width: 126px; }.seat .nm { font-size: 10px; }#handPanel .cards { gap: 7px; } }
@media (max-width: 760px) { #top { height: auto; min-height: 104px; padding: 12px 14px; gap: 8px; flex-wrap: wrap; }#top .brand { flex: 1 1 calc(100% - 100px); }#top h1 { font-size: 17px; }#top .brand .eyebrow { display: block; font-size: 8px; }.pixelLink { font-size: 10px; }#top .spacer { display: none; }.helpActions { margin-left: auto; }#top button { font-size: 10px; }#status { padding: 12px 14px; gap: 12px; }main, body.debug main { display: flex; padding: 0 8px 20px; }#tableCol { width: 100%; }#board { height: clamp(460px, 105vw, 580px); border-radius: 10px; }#side { display: grid; grid-template-columns: 1fr 1fr; }.sideIntro { display: none; }#rules,#logBox { grid-column: 1 / -1; }#yakuSide { display: flex; flex-direction: column; }.seat,.seat.pos0 { padding: 5px 6px; width: 106px; }.seat.pos1 { right: 5px; top: 35%; }.seat.pos3 { left: 5px; top: 35%; }.seat.pos0 { bottom: 42px; width: 148px; }.seat .score .sc { font-size: 19px; }.seat .status { font-size: 8px; }.seat .nm { font-size: 9px; }.tableLabel { top: 17px; left: 13px; font-size: 9px; }.tableLabel span { font-size: 6px; }.cameraControls { right: 9px; bottom: 10px; }.cameraControls button { padding: 6px 8px; font-size: 9px; }#handPanel .cards { gap: 7px; }#handPanel .card { width: min(9.5vw,60px); }#handPanel .hinfo { padding: 10px 2px; }#handPanel .hd { font-size: 10px; gap: 7px; }.handLegend { display: none; }.myScore { display: none; }#banner { font-size: 13px; padding: 10px 16px; }.yakuList { display: block; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }