/* V3 art refinement. Engine pacing and keyed tile rendering remain V2.1. */
:root { color-scheme:light;--night:#d9afe9;--paper:#fff9ee;--muted:#78558b;--gold:#ffe2a0;--grape:#a04dc9; }
html { background:#d9afe9; }
body { background:#d9afe9 url('../assets/scenery/mahjong-v3.svg') center top/cover fixed;color:#4b2b62; }
.start-screen::before,.game-screen::before { background:radial-gradient(ellipse at 50% 20%,#fff3fa66,transparent 65%); }
.game-screen { background:radial-gradient(ellipse at 50% 48%,#fff0ff33,transparent 70%); }
.gamebar,.sitebar { border-color:#fff4d388; }.brand-lockup { color:#542b75; }.brand-lockup small { color:#785a87; }
.brand-mark { background:linear-gradient(145deg,#d99cf2,#9855c6);border:2px solid #ffe2a0;color:#fff;box-shadow:0 3px 0 #8453a6,0 5px 18px #a661b74d; }
.round-readout,.round-readout b { color:#573573; }.round-dot { background:#f8d37b;box-shadow:0 0 8px #fff4b3; }
.icon-button,.quiet-button { color:#603a79;border-color:#f7deba;background:#fff1fa77;box-shadow:0 2px 0 #b685c44d; }
.game-layout { width:min(1240px,calc(100% - 24px));height:calc(100svh - 100px);max-height:780px;min-height:620px; }
.game-layout::before { inset:95px 110px 0; }
.game-table,.has-reaction .game-table { grid-template-columns:230px minmax(0,1fr) 230px;grid-template-rows:220px minmax(0,1fr) 30px;inset:0 0 112px; }
.seat--2 .seat-avatar,.seat--2 .character-figure { width:215px;height:194px; }.seat--2 .seat-copy { left:calc(50% + 111px);bottom:52px; }
.seat--2 .back-row { top:188px; }.seat--2 .meld-row { top:233px; }
.seat--1 .seat-avatar,.seat--3 .seat-avatar,.seat--1 .character-figure,.seat--3 .character-figure { width:225px;height:305px; }
.seat-copy b { color:#5a2d76;text-shadow:0 1px #fff3df; }.seat-copy > span { color:#725083;text-shadow:none; }
.anime-seat.is-active .seat-copy b { color:#80459f; }.seat .wind-tag { background:#f8e2ff;color:#65417d;border-color:#e3b75c;box-shadow:0 2px 6px #75429b33; }
.back-row > .tile-back { --tile-width:31px; }.back-row { gap:1px; }.seat--1 .back-row,.seat--3 .back-row { width:435px;top:52%; }
.seat--3 .back-row { left:94%; }.seat--1 .back-row { right:94%; }
.table-center { inset:9px 16px 0;width:calc(100% - 32px);height:calc(100% - 9px); }
.river-label { color:#d2f7e6b3;font-size:9px; }.river-tile > .tile-art { --tile-width:29px; }.river { grid-auto-rows:40px; }
.table-seal { width:105px;height:79px;background:linear-gradient(145deg,#b583ce,#8056a8);border:2px solid #ffe4a6;box-shadow:0 4px 0 #5e488e,0 6px 12px #1c5e5740,inset 0 1px #f9d9ff; }
.table-seal span { font-size:10px;color:#fff4e0; }.table-seal .seal-mark { font-size:10px;letter-spacing:2px;color:#ffe5a6; }.table-seal .seal-wall b { font-size:23px;color:#fff9ec; }.table-seal .seal-wall small { font-size:9px;color:#ffeace; }.table-seal .seal-status { font-size:9px; }.table-message { top:calc(44% + 90px);font-size:11px;color:#fff8de;text-shadow:0 1px #166c58; }
.player-console { left:19%;right:19%;bottom:70px; }.player-hand { min-height:93px;gap:3px; }.tile-button { width:51px;max-width:51px;height:64px; }.tile-button:hover:not(:disabled),.tile-button:focus-visible:not(:disabled) { transform:translateY(-5px); }
.hand-heading b,.turn-caption,.action-hint,.console-footer .text-button { color:#fff2dc;text-shadow:0 1px 2px #326c5c; }.hand-heading b { font-size:12px; }.turn-caption { font-size:10px; }
.human-seat .seat-copy b,.human-seat .seat-copy span { color:#fff2d0;text-shadow:0 1px #6f4496; }
.tile-art { border-radius:6px;background:#fff8e9;box-shadow:0 2px 0 #ead8b7,0 5px 0 #ad7bd1,0 7px 8px #35655633; }.tile-art::after { border-color:#fff5d888; }
.tile-back { box-shadow:0 2px 0 #eedcb9,0 5px 0 #975ac4,0 7px 7px #325e5540; }
.reaction-panel { border:2px solid #ffe2a0;border-radius:22px;background:linear-gradient(135deg,#eac0f4,#b886d3);box-shadow:0 5px 0 #885ba8,0 12px 28px #68438155,inset 0 2px #fff4fb; }
.reaction-heading h2,.reaction-heading span { color:#52326d; }.reaction-clock { border-color:#f4d493;background:linear-gradient(145deg,#fff2d4,#f7d8a0);color:#684389;box-shadow:0 3px 0 #bd87bd; }.reaction-clock b,.reaction-clock small { color:#684389; }
.reaction-panel .action-button,.action-button { min-width:68px;min-height:52px;border:2px solid #f6d595;border-radius:14px;background:linear-gradient(145deg,#fcdef7,#bf7edb);color:#593171;box-shadow:inset 0 2px #fff8fd,0 4px 0 #9860b5,0 5px 8px #78409822;font-size:20px; }
.action-button:hover { background:linear-gradient(145deg,#fff0fb,#d6a3ed);border-color:#ffeab3; }.action-button--win { color:#70417b;background:linear-gradient(145deg,#fff3ce,#ffd583);border-color:#fff2c0;box-shadow:inset 0 2px #fff,0 4px 0 #c19748,0 0 20px #ffe49677; }.action-button--pass { background:#e5c3ef;color:#77558b;border-color:#edd4f5; }
.banter-bubble { color:#59376e;border:2px solid #ffe4b3;background:#fff1faed;box-shadow:0 4px 0 #b889cc66,0 8px 20px #8960a133; }.banter-bubble b { color:#914fbc; }
.result-banner { color:#633875;background:radial-gradient(ellipse at 50% 0%,#fff6e4,#edc2ef 60%,#cfa1e0);border-color:#ffdf91;box-shadow:0 0 0 5px #fff2cf55,0 20px 60px #7d4ca077,0 0 75px #fcd5fa77; }
.win-word { color:#fff1bf;text-shadow:0 4px 0 #a665b7,0 0 25px #fff4ce; }.victory-line { color:#794999; }.win-subtitle,.result-kicker,.winning-hand-panel b,.winning-hand-panel small { color:#744d88; }.winning-hand-panel { background:#fff6f955;border-color:#d2a7d5; }.primary-button { background:linear-gradient(135deg,#f5d4fb,#cf96e5);border:2px solid #ffe5ad;box-shadow:0 4px 0 #ad73c9;color:#5f377c;border-radius:12px; }
.setup-panel,.modal { color:#59366f;background:linear-gradient(145deg,#fff1fbf5,#e7c4f5f2);border-color:#ffe8b6;box-shadow:0 15px 50px #8354a04d; }.character-picker .character-card { background:#fff5fd9c;border-color:#d5a9e4; }.character-name,.player-name-label,.setting-row { color:#593773; }.character-style,.setup-panel p,.welcome-line,.welcome-meta { color:#795788; }.welcome-panel h1 { color:#714199;text-shadow:0 3px #fff4e477; }.welcome-panel h1 em { color:#ad50af; }.player-name-input,input[type=text] { background:#fff8fd;color:#59366f;border-color:#d7abe6; }.companion-callout { background:#f8e6fa;color:#633b7d;border-color:#e2bae8; }
/* Every image has its own idle period/phase. Motion never touches back-row or hand. */
.anime-seat .character-figure { animation:v3-breathe var(--idle-duration,8s) ease-in-out var(--idle-delay,-2s) infinite;transform-origin:50% 95%; }
.anime-seat .character-figure img { animation:none;transform:none;transition:filter .2s;filter:drop-shadow(0 8px 7px #75468c44); }
.anime-seat .character-figure::before,.anime-seat .character-figure::after { display:none; }
.anime-seat.is-active .seat-avatar .portrait { border:0;box-shadow:none;background:none; }
.result-banner .result-kicker { color:#7b4c90; }.win-word { -webkit-text-stroke:1px #b17bc2; }
.result-banner > span,.anime-seat.is-winner .seat-copy b { color:#784891; }
.table-seal { background:linear-gradient(145deg,#a06cbf,#8056a8); }
.table-dim { inset:200px 20% 10px;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);background:#653b852b; }
.anime-seat[data-motion="thinking"] .character-figure img { animation:v3-think .65s ease-out 1;filter:drop-shadow(0 0 10px #fff4cb88); }
.anime-seat[data-motion="talk"] .character-figure img { animation:v3-talk .9s ease-in-out 2;filter:drop-shadow(0 0 12px #ffebaeaa); }
.anime-seat[data-motion="discard"] .character-figure img { animation:v3-discard .5s ease-out 1; }
.anime-seat[data-motion="chi"] .character-figure img { animation:v3-chi .55s ease-out 1; }
.anime-seat[data-motion="pong"] .character-figure img { animation:v3-pong .6s ease-out 1; }
.anime-seat[data-motion="kong"] .character-figure img { animation:v3-kong .75s ease-out 1; }
.anime-seat[data-motion="win"] .character-figure { animation:none;filter:drop-shadow(0 0 14px #ffe8b9aa); }
.anime-seat[data-motion="win"] .character-figure img { animation:v3-win .8s ease-in-out 3; }.anime-seat[data-motion="win"][data-celebration="calm"] .character-figure img { animation:v3-think .8s ease-out 2; }.anime-seat[data-motion="win"][data-celebration="confident"] .character-figure img { animation:v3-pong .8s ease-out 2; }
@keyframes v3-breathe { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(calc(-1 * var(--idle-travel,1px))) rotate(var(--idle-lean,.2deg)); } }
@keyframes v3-think { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-3px) scale(1.015); } }
@keyframes v3-talk { 0%,100% { transform:translateY(0); } 45% { transform:translateY(-2px) rotate(var(--idle-lean,.2deg)); } }
@keyframes v3-discard { 0%,100% { transform:translateY(0); } 35% { transform:translateY(-4px) scale(1.025); } }
@keyframes v3-chi { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-3px); } }
@keyframes v3-pong { 0%,100% { transform:scale(1); } 35% { transform:scale(1.035) translateY(-3px); } }
@keyframes v3-kong { 0%,100% { transform:scale(1); } 30% { transform:scale(1.05) translateY(-5px); } }
@keyframes v3-win { 0%,100% { transform:scale(1); } 45% { transform:translateY(-7px) scale(1.06); } }
@media(max-width:1100px) {
 .game-layout { min-height:620px;height:calc(100svh - 78px); }.game-layout::before { inset:85px 45px 0; }.game-table,.has-reaction .game-table { grid-template-columns:160px minmax(0,1fr) 160px;grid-template-rows:190px minmax(0,1fr) 30px; }.seat--1 .seat-avatar,.seat--3 .seat-avatar,.seat--1 .character-figure,.seat--3 .character-figure { width:163px;height:250px; }.seat--2 .seat-avatar,.seat--2 .character-figure { width:190px;height:168px; }.seat--2 .back-row { top:165px; }.back-row > .tile-back { --tile-width:27px; }.seat--1 .back-row,.seat--3 .back-row { width:375px; }.seat--2 .seat-copy { left:calc(50% + 98px);min-width:110px; }.player-console { left:16%;right:16%;bottom:70px; }.tile-button { width:44px;max-width:44px;height:55px; }.player-hand { min-height:78px; }.table-center { inset-inline:25px;width:calc(100% - 50px); }
}
@media(max-width:800px) {
 .game-layout { min-height:670px;max-height:870px; }.game-layout::before { inset:108px 10px 20px; }.game-table,.has-reaction .game-table { grid-template-columns:100px minmax(0,1fr) 100px;grid-template-rows:215px minmax(0,1fr) 25px; }.seat--1 .seat-avatar,.seat--3 .seat-avatar,.seat--1 .character-figure,.seat--3 .character-figure { width:120px;height:195px; }.seat--2 .back-row { top:178px; }.back-row > .tile-back { --tile-width:24px; }.seat--1 .back-row,.seat--3 .back-row { width:336px; }.table-center { inset-inline:31px;width:calc(100% - 62px); }.player-console { left:11%;right:11%;bottom:90px; }.tile-button { width:38px;max-width:38px;height:47.5px; }.seat-copy b { font-size:13px; }.seat--2 .seat-copy { left:calc(50% + 85px); }.river-tile > .tile-art { --tile-width:25px; }
}
@media(max-width:520px) {
 body { background-size:auto 100svh; }.game-layout { width:calc(100% - 8px);height:calc(100svh - 63px);max-height:720px;min-height:650px; }.game-layout::before { inset:106px -7px 79px; }.game-table,.has-reaction .game-table { grid-template-columns:62px minmax(0,1fr) 62px;grid-template-rows:166px minmax(0,1fr) 22px;inset:0 0 166px; }.seat--2 .seat-avatar,.seat--2 .character-figure { width:124px;height:140px; }.seat--2 .back-row { top:143px; }.seat--2 .seat-copy { left:calc(50% + 61px);min-width:70px;bottom:40px; }.seat--1 .seat-avatar,.seat--3 .seat-avatar,.seat--1 .character-figure,.seat--3 .character-figure { width:72px;height:145px; }.seat-copy b { font-size:10px; }.seat-copy > span { font-size:7px; }.back-row > .tile-back { --tile-width:19px; }.seat--1 .back-row,.seat--3 .back-row { width:266px;top:55%; }.seat--3 .back-row { left:100%; }.seat--1 .back-row { right:100%; }.table-center { inset:16px 13px 0;width:calc(100% - 26px);height:calc(100% - 16px); }.river-label { font-size:7px; }.river-tile > .tile-art { --tile-width:20px; }.table-seal { width:76px;height:68px;top:43%; }.table-seal span { font-size:8px; }.table-seal .seal-mark { font-size:9px; }.table-seal .seal-wall b { font-size:19px; }.table-seal .seal-wall small { font-size:7px; }.table-seal .seal-status { font-size:7px; }.table-message { top:calc(43% + 76px);font-size:8px; }.player-console { left:6%;right:6%;bottom:108px; }.tile-button { width:23px;max-width:23px;height:28.75px; }.player-hand { min-height:53px;gap:1px; }.tile-button.is-drawn { margin-left:5px; }.hand-heading b { font-size:9px; }.turn-caption { font-size:7px; }.reaction-panel { border-radius:17px;padding:10px 8px; }.reaction-panel .action-button { min-width:51px;min-height:48px;font-size:18px; }.reaction-panel .action-button--win { min-width:60px; }.action-button { min-height:32px;min-width:40px;font-size:12px; }.winning-tile > .tile-art { --tile-width:23px; }.seat--2 .meld-row { top:174px; }.game-tools .quiet-button { font-size:9px; }.result-banner { padding:19px 10px; }
}
@media(prefers-reduced-motion:reduce) { .anime-seat .character-figure,.anime-seat .character-figure img { animation:none!important;transition:none!important; } }
@media(max-width:520px) { .player-console { left:4%;right:4%; }.tile-button { width:24px;max-width:24px;height:30px; }.table-dim { inset:158px 10% 4px; } }
@media(min-width:521px) {
 .table-center { height:calc(100% - 58px); }
 .rivers { inset:10px 0 10px;grid-template-rows:105px minmax(0,1fr) 105px;gap:0; }
 .river,.river:not(:empty),.river:empty { grid-template-columns:repeat(6,25px);justify-content:center;grid-auto-rows:31px;gap:1px; }
 .rivers .river--0,.rivers .river--2 { grid-template-columns:repeat(10,25px); }
 .river-tile > .tile-art { --tile-width:24px; }
}
@media(max-width:520px) {
 .rivers .river--3 { grid-template-columns:repeat(3,22px);justify-content:start; }
 .rivers .river--1 { grid-template-columns:repeat(3,22px);justify-content:end; }
 .river.is-dense { grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:17px;gap:1px;padding-top:13px; }
 .rivers .river--3.is-dense { grid-template-columns:repeat(4,16px);justify-content:start; }
 .rivers .river--1.is-dense { grid-template-columns:repeat(4,16px);justify-content:end; }
 .river--0.is-dense,.river--2.is-dense { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .river.is-dense .river-tile > .tile-art { --tile-width:12px; }
}
@media(min-width:521px) and (max-width:800px) {
 .table-center { height:calc(100% - 98px); }
 .river,.river:not(:empty),.river:empty { grid-template-columns:repeat(6,21px); }
 .rivers .river--0,.rivers .river--2 { grid-template-columns:repeat(10,21px); }
 .river-tile > .tile-art { --tile-width:20px; }
}