/* Visual V2: reserve real space for independent characters and tile regions. */
body { background: #171020 url('../assets/scenery/mahjong-night.svg') center top / cover fixed; overflow-x: hidden; }
.start-screen,.game-screen { background: transparent; }
.start-screen::before,.game-screen::before { background: radial-gradient(ellipse at 50% 30%,rgb(109 65 129 / 16%),transparent 65%); }
.sitebar,.gamebar { width: min(1240px,calc(100% - 40px)); }
.brand-mark { background: linear-gradient(145deg,#835498,#412748); border-color:#d4b47d; }
.start-layout { width:min(1200px,calc(100% - 40px));grid-template-columns:minmax(260px,.7fr) minmax(0,1.4fr);gap:38px; }
.welcome-panel { min-height:540px; }
.welcome-panel h1 { margin-top:70px;font-size:clamp(42px,5vw,70px); }
.welcome-panel h1 em { color:#e9bfdd; }
.setup-panel { background:linear-gradient(150deg,rgb(41 29 51 / 95%),rgb(22 33 36 / 92%));border:1px solid #7c5a6d;border-radius:18px;padding:23px;box-shadow:0 20px 60px #0004; }
.character-picker { grid-template-columns:repeat(5,minmax(0,1fr));gap:8px; }
.character-picker .character-card { min-height:154px;padding:7px 3px;background:#1e1626;border-radius:12px; }
.character-picker .character-art { width:100%;height:100px;border-radius:8px; }
.character-picker .character-art img { object-fit:contain;object-position:50% 50%; }
.character-picker .character-style { font-size:8px; }
.character-picker .is-selected { border-color:#e3bc76;box-shadow:0 0 0 2px #e3bc7625,0 5px 15px #0004; }
.companion-callout { border-radius:12px; }
.companion-callout .character-figure { width:52px;height:60px;border-radius:10px; }
.primary-button { background:linear-gradient(110deg,#e8c6f3,#c68bda);color:#24132d;border-color:#f4dfb1; }
.gamebar { min-height:58px; }
.game-layout { width:min(1240px,calc(100% - 40px));padding:12px 0 14px;display:grid;grid-template-rows:auto auto;gap:0;min-height:0; }
.game-table { height:clamp(510px,calc(100svh - 240px),660px);min-height:0;position:relative;display:grid;grid-template-columns:190px minmax(0,1fr) 190px;grid-template-rows:160px minmax(0,1fr) 46px;gap:8px;padding:14px 17px 9px;border:8px solid #4a3344;border-radius:34px 34px 10px 10px;outline:1px solid #b19464;background:radial-gradient(ellipse at 50% 25%,#224b42,#163d37 60%,#102d29);box-shadow:0 20px 70px #0005,inset 0 0 0 2px #a9915b66; }
.game-table::before { inset:8px;border-radius:22px;opacity:.45;pointer-events:none; }
.game-table::after { inset:15px;border-radius:19px;opacity:.3;pointer-events:none; }
.seat { position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;min-width:0;max-width:100%;width:100%;padding:6px;z-index:3;border:0;border-radius:18px;background:transparent;gap:5px; }
.anime-seat { display:flex;flex-direction:column;align-items:center;align-self:center; }
.seat--3 { grid-area:1 / 1 / 4 / 2; }
.seat--1 { grid-area:1 / 3 / 4 / 4; }
.seat-avatar,.seat-avatar .portrait,.seat--2 .seat-avatar,.seat--2 .portrait { width:100%;height:220px; }
.anime-seat .seat-avatar { position:relative;display:block; }
.character-figure { display:block;width:100%;height:100%;overflow:hidden;position:relative;border:0;border-radius:16px;background:radial-gradient(ellipse at 50% 75%,rgb(164 102 175 / 17%),transparent 70%);box-shadow:none; }
.character-figure img { width:100%;height:100%;object-fit:contain;object-position:50% 100%;transition:transform .25s,filter .25s; }
.seat .wind-tag { bottom:5px;right:8px;top:auto;left:auto;min-width:25px;height:25px;background:#34233d;border-color:#b79863;font-size:12px; }
.seat-copy { text-align:center;min-width:0; }
.seat-copy b { display:block;max-width:none;overflow:visible;font-size:19px;color:#fff0cf;letter-spacing:.04em; }
.seat-copy > span { font-size:10px;color:#c9b7cc; }
.anime-seat.is-active .seat-copy b { color:#f8d889; }
.anime-seat.is-active .character-figure { box-shadow:0 0 25px #c996de22; }
.anime-seat.is-speaking .character-figure { filter:drop-shadow(0 0 8px #e8bc6766); }
.anime-seat.is-speaking .seat-copy > span { color:#f5d998; }
.anime-seat.is-performing .character-figure img { transform:translateY(-4px) scale(1.025); }
.anime-seat.is-winner { z-index:6; }
.anime-seat.is-winner .character-figure { filter:drop-shadow(0 0 15px #f0c88288); }
.anime-seat.is-winner .character-figure img { animation:character-happy .75s ease-in-out 3; }
.anime-seat.is-winner .seat-copy b { color:#ffe6a0; }
.seat--2 { grid-area:1 / 2;display:grid;grid-template-columns:145px minmax(0,190px);grid-template-rows:1fr auto auto;justify-content:center;align-items:center;align-self:stretch;gap:5px 12px; }
.seat--2 .seat-avatar { grid-area:1 / 1 / 4 / 2;height:150px; }
.seat--2 .character-figure { height:150px; }
.seat--2 .seat-copy { grid-area:1 / 2;align-self:end; }
.seat--2 .back-row { grid-area:2 / 2; }
.seat--2 .meld-row { grid-area:3 / 2; }
.back-row { width:100%;min-height:18px;height:auto;gap:1px;justify-content:center; }
.back-row > .tile-back { --tile-width:14px;margin-left:-3px; }
.back-row > .tile-back:first-child { margin-left:0; }
.meld-row { width:100%;justify-content:center;flex-wrap:wrap;gap:3px; }
.meld > .tile-art { --tile-width:22px; }
.human-seat { grid-area:3 / 2;display:flex;align-items:center;justify-content:center;gap:15px;align-self:center;padding:0; }
.human-seat .seat-avatar { display:none; }
.human-seat .seat-copy { display:flex;align-items:center;gap:8px; }
.human-seat .seat-copy b { font-size:14px; }
.human-seat .seat-copy span { font-size:9px; }
.human-seat .meld-row { width:auto; }
.table-center { grid-area:2 / 2;position:relative;inset:auto;width:100%;height:100%;min-height:0;z-index:2; }
.table-center::before { inset:0;border:1px solid #c4ab7622;border-radius:18px;background:radial-gradient(ellipse at center,#c6a97607,transparent); }
.table-seal { width:auto;height:auto;max-width:95%;min-height:30px;position:absolute;top:3px;left:50%;transform:translateX(-50%);border-radius:20px;padding:5px 12px;display:flex;flex-direction:row;gap:12px;white-space:nowrap;background:#172c2be6;border:1px solid #a08b6055;box-shadow:0 2px 9px #0003;color:#edd9b2; }
.seal-mark { font-size:9px;letter-spacing:1px;color:#c6a97c; }
.seal-wall b { font-size:17px; }.seal-wall small,.seal-wind,.seal-status { font-size:10px; }
.table-message { top:39px;left:50%;transform:translateX(-50%);max-width:96%;width:max-content;padding:3px 10px;border:0;border-radius:6px;box-shadow:none;background:#152b2b99;color:#ded5c0;font-size:10px;animation:none; }
.rivers { position:absolute;inset:65px 6px 5px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:6px;z-index:1; }
.river,.river:not(:empty),.river:empty { position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:36px;align-content:start;gap:3px;padding:23px 6px 6px;min-height:0;border:1px solid #d3c09a26;border-radius:9px;background:#061a1833;box-shadow:none;overflow:auto; }
.river::after { display:none; }
.river--2 { grid-area:1 / 1 / 2 / 3;grid-template-columns:repeat(10,minmax(0,1fr)); }
.river--3 { grid-area:2 / 1; }
.river--1 { grid-area:2 / 2; }
.river--0 { grid-area:3 / 1 / 4 / 3;grid-template-columns:repeat(10,minmax(0,1fr)); }
.river-label { position:absolute;top:4px;left:7px;font-size:9px;color:#c5b69b;letter-spacing:.03em; }
.river-tile { animation:none; }
.river-tile > .tile-art { --tile-width:28px; }
.river-tile.is-latest > .tile-art { outline:1px solid #e7c778;outline-offset:0;border-radius:5px;box-shadow:0 0 10px #e7c77855; }
.player-console { position:relative;border:1px solid #a0846155;border-top:0;border-radius:0 0 22px 22px;padding:10px 20px 12px;background:linear-gradient(#193b34,#1b2830);box-shadow:0 14px 45px #0003;z-index:4; }
.hand-heading { min-height:25px; }.hand-heading b { font-size:12px; }.hand-heading .eyebrow { color:#ccb184; }
.hand-scroll { width:100%;overflow:visible; }
.player-hand { min-width:0;width:100%;min-height:85px;display:flex;justify-content:center;align-items:end;gap:3px;padding:9px 2px 5px; }
.tile-button { flex:1 1 0;min-width:0;max-width:57px;width:auto;height:auto;aspect-ratio:4 / 5; }
.tile-button.is-drawn { margin-left:8px; }
.tile-button:hover:not(:disabled),.tile-button:focus-visible:not(:disabled) { transform:translateY(-5px); }
.tile-button.is-selected { transform:translateY(-13px);filter:brightness(1.08); }
.tile-button.is-hint { outline:2px solid #d0ade6;border-radius:7px; }
.console-footer { min-height:30px; }.console-tools { gap:12px; }
.reaction-panel { display:grid;grid-template-columns:60px minmax(0,1fr) 40px;gap:15px;align-items:center;padding:13px 16px;margin:0 0 10px;border:1px solid #efd38d;border-radius:14px;background:linear-gradient(110deg,#49304f,#2b273a);box-shadow:0 0 0 3px #d3ae6022,0 8px 26px #0004; }
.reaction-clock { width:55px;height:63px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #e3c67777;border-radius:11px;color:#ffe6b1;background:#24192e; }
.reaction-clock b { font-size:30px;line-height:1; }.reaction-clock small { font-size:9px; }
.reaction-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px; }
.reaction-heading h2 { margin:0;color:#fff2d4;font-size:16px; }.reaction-heading span { color:#d6c0d9;font-size:10px; }
.reaction-options .action-list { display:flex;flex-wrap:wrap;gap:8px; }
.reaction-options .action-button { min-height:48px;min-width:70px;padding:5px 15px;font-size:18px;border-radius:10px;border-color:#c1a1ce; }
.reaction-options .action-button--win { min-width:86px;background:linear-gradient(#f6d899,#e5b66b);color:#39213c;border-color:#ffeabc;font-weight:900;box-shadow:0 0 13px #edc67644; }
.reaction-options .action-button--pass { min-width:60px;color:#cdbecf;background:#241e2c; }
.reaction-tile .tile-art { --tile-width:40px; }
.reaction-panel.is-urgent .reaction-clock { color:#ffcbbd;border-color:#e99e81;box-shadow:0 0 12px #e99e8133; }
.has-reaction .game-table { height:clamp(390px,calc(100svh - 360px),540px); }
.table-dim { position:absolute;inset:0;border-radius:inherit;background:#10081799;z-index:4;pointer-events:none; }
.win-pause { position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);z-index:15;color:#f3d795;font:28px Georgia,serif; }
.result-banner { z-index:20;width:min(650px,calc(100% - 30px));max-height:85svh;padding:22px;border-radius:22px;background:radial-gradient(ellipse at 50% 0%,#654074,#34243e 65%,#212a30);border-color:#e7c282; }
.result-banner > b { font-size:20px; }.result-banner > span { font-size:11px;letter-spacing:.16em;color:#dfc18a; }
.win-word { font:700 70px/1.2 Georgia,'Microsoft YaHei',serif;color:#ffe3a2;text-shadow:0 3px 0 #6f477b,0 0 28px #e8b87055; }
.win-wait { color:#e8d2ef;font-size:12px; }
.winning-hand-panel { border-radius:12px;margin-top:8px; }
.winning-hand { gap:3px;overflow-x:auto; }
.winning-tile > .tile-art { --tile-width:36px; }
.winning-tile.is-winning-tile > .tile-art { outline:2px solid #f6d987;outline-offset:1px;filter:brightness(1.05);border-radius:6px; }
.win-petals { position:fixed;inset:0;z-index:16;overflow:hidden;pointer-events:none; }
.win-petals i { position:absolute;left:calc(9% + var(--petal) * 7%);top:25%;width:7px;height:11px;border-radius:70% 10% 70% 10%;background:#dec49a;opacity:0;animation:win-petal 2.6s ease-in-out infinite;animation-delay:calc(var(--petal) * .12s); }
.win-petals i:nth-child(2n) { background:#c497d7; }
.discard-flight { position:absolute;z-index:8;left:50%;top:55%;pointer-events:none;animation:discard-flight .6s ease-out both; }
.discard-flight > .tile-art { --tile-width:38px; }
.discard-flight--0 { --flight-x:0px;--flight-y:160px; }.discard-flight--1 { --flight-x:220px;--flight-y:0px; }.discard-flight--2 { --flight-x:0px;--flight-y:-150px; }.discard-flight--3 { --flight-x:-220px;--flight-y:0px; }
@keyframes discard-flight { 0% { opacity:1;transform:translate(calc(-50% + var(--flight-x)),calc(-50% + var(--flight-y))) scale(1.15); } 70% { opacity:1;transform:translate(-50%,-50%) scale(.8); } 100% { opacity:0;transform:translate(-50%,-50%) scale(.75); } }
@keyframes character-happy { 0%,100% { transform:translateY(0) scale(1); } 45% { transform:translateY(-8px) scale(1.05); } }
@keyframes win-petal { 0% { opacity:0;transform:translateY(-20px) rotate(0deg); } 20% { opacity:.7; } 100% { opacity:0;transform:translateY(380px) rotate(220deg); } }
@media(max-width:1100px) {
  .game-table { grid-template-columns:145px minmax(0,1fr) 145px;grid-template-rows:145px minmax(0,1fr) 42px;padding:11px; }
  .seat-avatar,.seat-avatar .portrait { height:190px; }
  .seat--2 { grid-template-columns:120px minmax(0,150px);gap:5px; }.seat--2 .seat-avatar,.seat--2 .character-figure { height:138px; }
  .seat-copy b { font-size:16px; }.rivers { inset-inline:3px; }.river--2,.river--0 { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .river-tile > .tile-art { --tile-width:26px; }
  .character-picker { grid-template-columns:repeat(5,minmax(0,1fr)); }.character-picker .character-card { min-height:132px; }.character-picker .character-art { height:84px; }
}
@media(max-width:800px) {
  .game-layout,.gamebar { width:calc(100% - 24px); }.game-layout { padding-top:7px; }
  .game-table { height:clamp(560px,calc(100svh - 235px),730px);grid-template-columns:112px minmax(0,1fr) 112px;grid-template-rows:145px minmax(0,1fr) 40px;gap:4px;border-width:6px;padding:8px; }
  .seat-avatar,.seat-avatar .portrait { height:160px; }.seat-copy b { font-size:14px; }
  .back-row > .tile-back { --tile-width:11px; }.meld > .tile-art { --tile-width:19px; }
  .seat--2 { grid-template-columns:110px minmax(0,140px); }.seat--2 .seat-avatar,.seat--2 .character-figure { height:138px; }
  .table-seal { gap:6px;padding:5px 8px; }.seal-mark { font-size:8px; }.seal-wall b { font-size:14px; }.seal-status { display:none; }
  .rivers { gap:4px; }.river { grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:32px;padding:20px 3px 3px;gap:2px; }
  .river--2,.river--0 { grid-template-columns:repeat(6,minmax(0,1fr)); }.river-tile > .tile-art { --tile-width:24px; }.river-label { font-size:8px; }
  .has-reaction .game-table { height:clamp(450px,calc(100svh - 370px),610px); }
  .start-layout { grid-template-columns:1fr;max-width:700px;gap:12px; }.welcome-panel { min-height:180px; }.welcome-panel h1 { margin:20px 0;font-size:48px; }.welcome-tiles { right:5px;top:24px; }
}
@media(max-width:520px) {
  .gamebar,.game-layout { width:calc(100% - 12px); }.gamebar { min-height:52px; }.brand-lockup small { font-size:6px; }.gamebar .brand-mark { width:30px;height:32px; }
  .game-tools { gap:4px; }.game-tools .icon-button { width:27px;height:28px; }.quiet-button { font-size:9px;padding:0 8px;min-height:28px; }
  .game-table { height:clamp(480px,calc(100svh - 215px),655px);grid-template-columns:70px minmax(0,1fr) 70px;grid-template-rows:123px minmax(0,1fr) 33px;gap:3px;padding:7px 3px;border-width:4px;border-radius:23px 23px 8px 8px; }
  .seat { padding:2px;gap:4px; }.seat-avatar,.seat-avatar .portrait { height:119px; }.seat-copy b { font-size:10px;letter-spacing:0; }.seat-copy > span { font-size:7px; }
  .seat--2 { grid-template-columns:85px minmax(0,85px);gap:3px; }.seat--2 .seat-avatar,.seat--2 .character-figure { height:115px; }.seat--2 .seat-copy b { font-size:13px; }
  .back-row { gap:0;min-height:10px; }.back-row > .tile-back { --tile-width:8px;margin-left:-3px; }.meld > .tile-art { --tile-width:14px; }.meld-row { gap:2px; }
  .seat .wind-tag { width:17px;min-width:17px;height:17px;right:0;font-size:8px; }
  .human-seat { gap:8px; }.human-seat .seat-copy b { font-size:11px; }.human-seat .seat-copy span { font-size:7px; }
  .table-seal { max-width:100%;gap:5px;padding:3px 5px;top:1px; }.seal-mark { font-size:7px;letter-spacing:0; }.seal-wall b { font-size:13px; }.seal-wall small,.seal-wind { font-size:8px; }
  .table-message { top:31px;font-size:8px;padding:3px;max-width:100%;white-space:normal; }.rivers { inset:60px 0 2px;gap:3px; }.river { grid-auto-rows:27px;grid-template-columns:repeat(3,minmax(0,1fr));padding:19px 2px 2px;gap:1px; }.river--2,.river--0 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .river-tile > .tile-art { --tile-width:21px; }.river-label { font-size:7px;left:3px;white-space:nowrap; }
  .player-console { padding:8px 6px;border-radius:0 0 14px 14px; }.hand-heading .eyebrow { font-size:6px; }.hand-heading b { font-size:10px; }.turn-caption { font-size:8px; }
  .player-hand { min-height:53px;gap:1px;padding:7px 1px 4px; }.tile-button { min-width:0;max-width:32px;width:auto;height:auto; }.tile-button.is-drawn { margin-left:4px; }
  .console-footer { min-height:25px; }.text-button { font-size:9px; }.action-hint { font-size:9px; }
  .reaction-panel { grid-template-columns:43px minmax(0,1fr);gap:9px;padding:10px 8px;margin-bottom:7px;border-radius:10px; }.reaction-clock { width:42px;height:55px; }.reaction-clock b { font-size:27px; }.reaction-tile { display:none; }
  .reaction-heading { margin-bottom:7px; }.reaction-heading h2 { font-size:14px; }.reaction-heading span { font-size:8px; }
  .reaction-options .action-list { gap:5px; }.reaction-options .action-button { min-height:48px;min-width:48px;font-size:16px;padding:3px 10px; }.reaction-options .action-button--win { min-width:58px; }.reaction-options .action-button--pass { min-width:45px; }
  .has-reaction .game-table { height:clamp(360px,calc(100svh - 350px),525px); }
  .result-banner { padding:16px 12px;max-height:87svh; }.win-word { font-size:58px; }.result-banner > b { font-size:17px; }.winning-tile > .tile-art { --tile-width:26px; }.winning-hand-panel { padding:8px 6px; }.winning-hand { gap:2px; }
  .discard-flight > .tile-art { --tile-width:28px; }.discard-flight--1 { --flight-x:100px; }.discard-flight--3 { --flight-x:-100px; }
  .start-layout { width:calc(100% - 20px); }.setup-panel { padding:15px 10px; }.character-picker { grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; }.character-picker .character-card { min-height:123px; }.character-picker .character-art { height:80px; }.welcome-panel { min-height:180px; }.welcome-panel h1 { font-size:40px; }.welcome-tiles { top:20px;right:0; }.setup-heading h2 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; } }