/* V3.1.1 component pass: scenery and table artwork remain V3.1. */
.visual-v311 .anime-seat .seat-avatar { position:absolute;left:var(--avatar-x);right:auto;top:var(--avatar-y);width:var(--avatar-w);height:var(--avatar-h); }
.visual-v311 .anime-seat .character-figure { width:100%;height:100%; }
.visual-v311 .anime-seat .character-figure img { object-fit:contain;object-position:50% 0;translate:var(--portrait-x) var(--portrait-y);scale:var(--portrait-scale); }
.visual-v311 .anime-seat[data-character-id="purple"] .character-figure img { object-fit:contain;object-position:50% 0; }
.visual-v311 .anime-seat .seat-copy { position:absolute;bottom:auto;max-width:145px;min-width:0;text-align:center; }
.visual-v311 .seat--2 .seat-avatar { clip-path:inset(0 0 28%); }
.visual-v311 .seat--1 .seat-avatar,.visual-v311 .seat--3 .seat-avatar { clip-path:inset(0 0 5% round 0 0 35% 35%); }
.visual-v311 .seat--1 .back-row,.visual-v311 .seat--3 .back-row { left:var(--edge-x);right:auto;top:var(--edge-y);width:max-content;transform:translate(-50%,-50%) rotate(var(--edge-angle));gap:1px;filter:drop-shadow(3px 5px 3px #092f2cd9); }
.visual-v311 .back-row .tile-back { box-shadow:0 2px 0 #e1cbac,0 4px 0 #693181,0 6px 4px #10372c80; }
.visual-v311 .table-center { grid-area:auto;position:absolute;inset:auto;left:var(--zone-x);top:var(--zone-y);width:var(--zone-w);height:var(--zone-h);transform:translate(-50%,-50%); }
.visual-v311 .rivers { inset:0;display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 175px minmax(0,1fr);gap:8px; }
.visual-v311 .river,.visual-v311 .river.is-dense { padding:14px 0 0;grid-template-columns:repeat(5,25px);grid-auto-rows:31px;gap:1px;align-content:start;justify-content:center;min-width:0;min-height:0; }
.visual-v311 .river--2,.visual-v311 .river--0,.visual-v311 .river--2.is-dense,.visual-v311 .river--0.is-dense { grid-column:1 / 4;grid-template-columns:repeat(10,25px); }
.visual-v311 .river--3 { grid-area:2 / 1; }.visual-v311 .river--1 { grid-area:2 / 3; }
.visual-v311 .table-seal { left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:58px;padding:5px 3px;gap:2px; }
.visual-v311 .table-seal .seal-status { display:none; }.visual-v311 .seal-wall b { font-size:19px; }.visual-v311 .seal-mark { font-size:8px;letter-spacing:1px; }.visual-v311 .seal-wall small { font-size:7px; }.visual-v311 .seal-wind { font-size:8px; }
.visual-v311 .table-message { position:absolute;top:auto;bottom:-21px;left:50%;transform:translateX(-50%);margin:0;padding:0;white-space:nowrap;max-width:none; }
.visual-v311 .player-hand .tile-button { width:47.5px;max-width:47.5px;height:59.375px; }
.visual-v311 .tile-art { border-radius:7px;box-shadow:0 2px 0 #f6dfb7,0 5px 0 #9048a0,0 7px 5px #062c2c70; }
.visual-v311 .action-button { position:relative;isolation:isolate;border:2px solid #ffda91;border-radius:25px;min-height:56px;padding:9px 25px;font-weight:800;color:#fff4e8;background:radial-gradient(ellipse at 50% 0,#b054b0 0,transparent 65%),linear-gradient(170deg,#62225d,#291632 65%,#501b57);box-shadow:inset 0 2px 2px #ffe1f1aa,inset 0 -3px 6px #ba44b077,0 5px 0 #421b43,0 6px 0 #b67c44,0 9px 10px #24102788,0 0 12px #eb57c966;text-shadow:0 2px 2px #290f30;animation:v311-choice-in .35s ease-out 1; }
.visual-v311 .action-button::before,.visual-v311 .action-button::after { content:'✿';position:absolute;font-size:15px;color:#fac4ee;text-shadow:0 1px #b364bd,0 0 3px #ffe1ad;pointer-events:none; }
.visual-v311 .action-button::before { left:3px;bottom:4px; }.visual-v311 .action-button::after { right:3px;top:3px;font-size:11px;color:#ffe2a2; }
.visual-v311 .action-button[data-type="peng"] { box-shadow:inset 0 2px #f9baf0,0 5px #421b43,0 0 16px #f587d77a; }
.visual-v311 .action-button[data-type="openKong"],.visual-v311 .action-button[data-type="concealedKong"],.visual-v311 .action-button[data-type="addedKong"] { background:linear-gradient(160deg,#9c3e9c,#3e164a);box-shadow:inset 0 2px #ffc9fa,0 5px #421b43,0 0 21px #ee6ede88; }
.visual-v311 .action-button--win { background:radial-gradient(ellipse at 50% 35%,#f75feb,#b525aa 60%,#701170);border-color:#fff0ab;box-shadow:inset 0 2px #fff0f5,inset 0 -3px #ee90de,0 5px #741063,0 6px #ffd283,0 0 25px #ff50dbb3;text-shadow:0 2px #941b7c;animation:v311-win-in .55s cubic-bezier(.2,.8,.2,1.25) 1; }
.visual-v311 .action-button--win::after { content:'✧';font-size:22px;animation:v311-spark .9s ease-out 1; }
.visual-v311 .action-button--pass { background:linear-gradient(150deg,#765078,#321c3c);box-shadow:inset 0 2px #d6afd9,0 5px #36223c,0 7px 10px #24102777; }
.visual-v311 .action-button:hover { filter:brightness(1.14); }.visual-v311 .action-button:active { translate:0 3px; }
.pause-overlay { position:fixed;inset:58px 0 0;z-index:80;display:grid;place-items:center;background:#24102d42;backdrop-filter:blur(2px); }
.pause-overlay section { text-align:center;padding:25px 55px;border:2px solid #f8d794;border-radius:28px;background:linear-gradient(140deg,#633367e8,#291c38e8);box-shadow:inset 0 1px #f9cced,0 0 30px #db67cf60;color:#fff0d4; }
.pause-symbol { color:#f6bfec;font-size:30px; }.pause-overlay h2 { margin:8px 0 22px;font:700 24px Georgia,'Microsoft YaHei',serif;letter-spacing:3px; }
.is-paused .game-layout *,.is-paused .game-layout *::before,.is-paused .game-layout *::after,.is-paused .result-banner * { animation-play-state:paused!important; }
.is-paused .game-layout,.is-paused .result-banner { pointer-events:none; }.is-paused .modal-scrim { z-index:100; }.pause-button { white-space:nowrap; }
@keyframes v311-choice-in { from { opacity:0;transform:translateY(7px) scale(.95); } to { opacity:1;transform:none; } }
@keyframes v311-win-in { 0% { opacity:0;transform:scale(.85); } 70% { opacity:1;transform:scale(1.07); } 100% { transform:scale(1); } }
@keyframes v311-spark { from { opacity:0;transform:translate(-5px,5px) scale(.5); } 50% { opacity:1; } to { opacity:1;transform:none; } }
@media(max-width:1100px) { .visual-v311 .player-hand .tile-button { width:41px;max-width:41px;height:51.25px; } }
@media(max-width:800px) { .visual-v311 .player-hand .tile-button { width:35.5px;max-width:35.5px;height:44.375px; }.visual-v311 .rivers { grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 150px minmax(0,1fr);gap:6px; }.visual-v311 .river,.visual-v311 .river.is-dense { grid-template-columns:repeat(5,21px);grid-auto-rows:26px; }.visual-v311 .river--0,.visual-v311 .river--2,.visual-v311 .river--0.is-dense,.visual-v311 .river--2.is-dense { grid-template-columns:repeat(10,21px); } }
@media(max-width:520px) {
 .visual-v311 .player-hand .tile-button { width:22.3px;max-width:22.3px;height:27.875px; }
 .visual-v311 .anime-seat .seat-copy { max-width:82px;padding:3px; }.visual-v311 .seat--2 .seat-copy { max-width:92px; }
 .visual-v311 .table-seal { width:55px;height:49px; }.visual-v311 .table-seal .seal-wall b { font-size:19px; }.visual-v311 .table-seal .seal-mark { font-size:7px; }.visual-v311 .table-seal .seal-wall small { font-size:6px; }
 .visual-v311 .rivers { grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 106px minmax(0,1fr);gap:4px; }
 .visual-v311 .river,.visual-v311 .river.is-dense { grid-template-columns:repeat(4,16px);grid-auto-rows:18px;gap:1px;padding-top:13px; }
 .visual-v311 .river--2,.visual-v311 .river--0,.visual-v311 .river--2.is-dense,.visual-v311 .river--0.is-dense { grid-template-columns:repeat(8,16px); }
 .visual-v311 .river-tile > .tile-art,.visual-v311 .river.is-dense .river-tile > .tile-art { --tile-width:13px; }
 .visual-v311 .table-message { bottom:-17px;font-size:8px; }.visual-v311 .action-button { padding:8px 17px;min-height:48px;min-width:51px;border-radius:20px;font-size:18px; }.visual-v311 .action-button::before { font-size:10px; }.pause-overlay { inset:54px 0 0; }.pause-overlay section { padding:22px 38px; }
}
@media(prefers-reduced-motion:reduce) { .visual-v311 .action-button { animation:none; } }

@media(min-width:801px) { .visual-v311 .rivers { grid-template-rows:minmax(0,1fr) 120px minmax(0,1fr); }.visual-v311 .river,.visual-v311 .river.is-dense { grid-template-columns:repeat(5,22px);grid-auto-rows:27px; }.visual-v311 .river--0,.visual-v311 .river--2,.visual-v311 .river--0.is-dense,.visual-v311 .river--2.is-dense { grid-template-columns:repeat(10,22px); }.visual-v311 .river-tile > .tile-art { --tile-width:21px; } }

.visual-v311 .seat--3 .seat-avatar { clip-path:inset(0 18% 5% 0 round 0 0 35% 35%); }.visual-v311 .seat--1 .seat-avatar { clip-path:inset(0 0 5% 18% round 0 0 35% 35%); }
@media(max-width:520px) { .visual-v311 .seat--1 .seat-copy,.visual-v311 .seat--3 .seat-copy { max-width:54px; } }

.component-showcase { position:fixed;z-index:50;left:10%;right:10%;top:120px;padding:24px;background:#35203bee;border:2px solid #edcf95;border-radius:20px;box-shadow:0 12px 35px #190c2980;text-align:center; }.component-showcase h2 { color:#fff0da;font-size:16px; }.component-tiles { display:grid;grid-template-columns:repeat(9,1fr);gap:14px;justify-items:center; }.component-tiles .tile-art { --tile-width:60px; }.component-showcase .action-list { justify-content:center;gap:18px; }
@media(max-width:520px) { .component-showcase { left:4%;right:4%;top:140px;padding:12px; }.component-tiles { grid-template-columns:repeat(7,1fr);gap:9px; }.component-tiles .tile-art { --tile-width:32px; }.component-showcase .action-list { gap:8px;flex-wrap:wrap; } }

.visual-v311 .console-footer .table-message { position:static;transform:none;white-space:normal;font-size:10px;max-width:42%;text-align:left; }.visual-v311 .console-footer:has(.table-message) .action-hint { display:none; }
@media(max-width:520px) { .visual-v311 .console-footer .table-message { font-size:7px; } }

@media(max-width:520px) { .visual-v311 .seat--1 .seat-copy,.visual-v311 .seat--3 .seat-copy { max-width:36px;padding:2px;font-size:8px; }.visual-v311 .seat--1 .seat-copy b,.visual-v311 .seat--3 .seat-copy b { font-size:8px; }.visual-v311 .seat--1 .seat-copy > span,.visual-v311 .seat--3 .seat-copy > span { font-size:6px; }.visual-v311 .seat--3 .character-figure img { translate:calc(var(--portrait-x) - 6%) var(--portrait-y); }.visual-v311 .seat--1 .character-figure img { translate:calc(var(--portrait-x) + 6%) var(--portrait-y); } }

.is-paused .result-banner,.is-paused .impact { animation-play-state:paused!important; }