*{box-sizing:border-box}body{margin:0;background:#080e15;color:#f6dfb6;font-family:Georgia,'Noto Serif TC',serif;display:grid;place-items:center}button{color:inherit;font:inherit;touch-action:manipulation;cursor:pointer;border:1px solid #a48959;background:linear-gradient(150deg,#203142,#0c1624);border-radius:12px;box-shadow:0 3px 8px #0006;min-height:42px;padding:8px 16px}button:disabled{opacity:.4}button:focus-visible{outline:2px solid #faafbf;outline-offset:3px}small{display:block;font:10px/1.5 Arial,sans-serif;letter-spacing:.3px}#app{isolation:isolate;position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;background:#101924}.room{position:absolute;inset:0;background:url('assets/room.webp') center/cover;z-index:-1}header{position:absolute;top:max(10px,env(safe-area-inset-top));left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;z-index:10}header button{width:38px;min-height:38px;padding:0;border-radius:50%;font-size:23px}.logo{text-align:center;font-size:29px;letter-spacing:5px;text-shadow:0 2px 5px #000}.logo small{font-size:9px;letter-spacing:3px}.screen{position:absolute;inset:0}.hidden{display:none!important}.gold{background:linear-gradient(#f2d8a5,#b89150);border-color:#f5dfb4;color:#18202a}.title{position:absolute;top:21%;left:0;right:0;text-align:center;text-shadow:0 4px 15px #000}.title span{font:10px Arial;letter-spacing:3px}.title h1{font-size:27px;margin:16px 0 8px;font-weight:400}.title p{font-size:16px;letter-spacing:2px}.cover-cast{position:absolute;top:40%;left:3%;width:94%;display:flex;justify-content:center;align-items:end}.cover-cast .sprite{width:25%;aspect-ratio:2/3}.sprite{background-size:400% 600%;background-repeat:no-repeat;filter:drop-shadow(0 5px 5px #0005)}#start{position:absolute;bottom:15%;left:25%;width:50%;font-size:18px}.old-version{position:absolute;bottom:8%;left:0;width:100%;text-align:center;color:#c6b89e;font:11px Arial}.choose-panel{position:absolute;inset:13% 5% 7%;background:#0a1426ed;border:1px solid #b8945e;border-radius:22px;padding:20px 15px;display:flex;flex-direction:column;justify-content:center;gap:12px}.choose-panel h2{text-align:center;font-size:19px;margin:0}.choose-panel h3{text-align:center;font-size:13px;margin:4px 0}.choose-panel h2 small{margin-top:5px}#characters{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}#characters button{padding:4px 2px;min-width:0;border-color:#526279;font-size:12px}#characters .sprite{width:100%;aspect-ratio:2/3}.chosen{border-color:#ffddb0!important;box-shadow:0 0 0 1px #ffddb0,0 0 18px #deb36c33}.styles{display:flex;gap:8px}.styles button{flex:1;padding:9px 3px;font-size:13px}#play{margin-top:10px}#loading{font:10px Arial;text-align:center;color:#afa898;min-height:12px}.hud{position:absolute;top:11%;left:4%;right:4%;display:flex;justify-content:space-between;gap:8px;font:10px Arial;z-index:8;text-shadow:0 1px 4px #000}.hud span{background:#0a1726cc;border:1px solid #9b7d4e66;border-radius:6px;padding:5px 7px}#world{position:absolute;top:19%;left:0;width:100%;height:66%;z-index:3;touch-action:none}#world canvas{display:block;width:100%;height:100%;touch-action:none}.seat{position:absolute;z-index:2;pointer-events:none;width:25%;transform:translate(-50%,-100%);text-align:center}.seat .sprite{width:100%;aspect-ratio:2/3;transition:filter .3s}.seat span{display:inline-block;font:10px Arial;background:#0a1624df;border:1px solid #b5975b77;border-radius:7px;padding:4px 10px;white-space:nowrap}.seat.self{z-index:4;width:29%}.seat.thinking .sprite{filter:drop-shadow(0 0 7px #efc57d88)}#turn-status{position:absolute;top:86%;left:12%;right:12%;text-align:center;font:11px Arial;z-index:7;text-shadow:0 2px 5px #000}.hint{position:absolute;bottom:4%;left:3%;font-size:10px;color:#e3cfaa;z-index:7}.hint small{font-size:9px}.build-tag{position:absolute;bottom:2%;right:3%;font:8px Arial;color:#b9a98d}#discard{position:absolute;right:3%;top:80%;padding:5px 18px;font-size:12px;z-index:7}#react{position:absolute;left:3%;top:80%;font-size:22px;line-height:1;z-index:7;padding:5px 14px}#react small{font-size:9px}#reactions{position:absolute;top:74%;left:3%;z-index:9;background:#111c2eee;padding:5px;border-radius:12px;display:flex;gap:3px}#reactions button{font-size:22px;padding:5px 8px}#claims{position:absolute;z-index:12;top:44%;left:8%;right:8%;padding:12px;background:#0b1828f5;border:1px solid #d5b475;border-radius:15px;text-align:center;max-height:32%;overflow:auto;box-shadow:0 15px 55px #0009}#claims p{margin:0 0 9px;font-size:13px}#claim-options{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}#claim-options button{font-size:11px;padding:6px 10px}#pass{margin-top:10px;font-size:11px;min-height:34px}.faces{display:flex;gap:2px;justify-content:center;margin-top:7px;pointer-events:none}.face{width:25px;height:36px;background-color:#fff5dd;background-size:600% 700%;border-radius:3px;border:1px solid #caba92;box-shadow:0 2px 0 #1b8274}.faces .face:last-child{outline:1px solid #e7bf76}dialog{max-width:90%;background:#122033;color:#f6ddb0;border:1px solid #b89964;border-radius:20px;padding:24px;max-height:85svh;overflow:auto}dialog::backdrop{background:#0009}dialog h2{font-size:20px;margin:0 0 20px}dialog p{font-size:12px;line-height:1.7}dialog label{display:block;font-size:12px;margin:18px 0}dialog input{display:block;width:100%;accent-color:#42a898;margin-top:10px}dialog>button{width:100%}#result-hand{display:flex;flex-wrap:wrap;gap:4px}#fatal{position:absolute;inset:30% 8%;padding:24px;background:#102036;z-index:30;font-size:15px}@media(min-width:700px){#app{width:min(1100px,133.33svh,100vw);height:min(825px,100svh);min-height:600px;aspect-ratio:4/3}.choose-panel{inset:14% 20% 8%}#world{top:17%;height:72%;left:12%;width:76%}.seat{width:17%}.seat.self{width:20%}.cover-cast{left:20%;width:60%;top:32%}.title{top:17%}.title h1{font-size:33px}#start{left:36%;width:28%;bottom:12%}.old-version{bottom:5%}#claims{left:28%;right:28%}.hud{left:15%;right:15%}#discard{right:12%}#react{left:12%}}
.sprite,.seat .sprite,#characters .sprite,.cover-cast .sprite{aspect-ratio:1}
/* Composition pass: seated viewpoint, broad table, cropped foreground. */
.room{background-image:url('assets/room.webp');background-position:center 37%;filter:none}header{top:max(12px,env(safe-area-inset-top))}.logo{font-size:35px;letter-spacing:6px;padding:9px 25px 7px;background:linear-gradient(145deg,#171b22e8,#080d15e8);border:1px solid #b5925d;border-radius:10px;box-shadow:0 0 0 3px #0b111acc,0 5px 15px #0007}.logo small{font-size:10px;letter-spacing:3px}.hud{top:14%;left:3%;right:auto;flex-direction:column;gap:4px}.hud span{font-size:9px;padding:4px 7px;max-width:max-content}#world{inset:0;width:100%;height:100%;z-index:3}.seat{width:35%;z-index:2}.seat .sprite{filter:brightness(.86) drop-shadow(0 6px 5px #0009)}#seat2{width:43%}#seat1,#seat3{width:35%}.seat span{display:none}.seat.self{width:67%;z-index:4}.seat.self .sprite{filter:brightness(.7) drop-shadow(0 0 15px #0008)}.seat-badge{position:absolute;z-index:6;border:1px solid #ad8b53;border-radius:7px;background:linear-gradient(140deg,#1e2531f2,#080e18f2);box-shadow:0 2px 8px #0008;text-align:center;min-width:70px;padding:5px 12px;font:11px Georgia;color:#f0d29e;pointer-events:none}#badge2{left:50%;top:28%;transform:translateX(-50%)}#badge1{right:1%;top:47%}#badge3{left:1%;top:47%}#badge0{left:3%;bottom:3%;padding:9px 20px}.hint{left:50%;bottom:1.4%;transform:translateX(-50%);font-size:9px;white-space:nowrap;text-align:center}.hint small{font-size:8px}#turn-status{top:75%;font-size:10px;left:24%;right:24%;padding:4px;background:#0b1429b0;border-radius:8px}#discard{right:4%;top:76%;font-size:12px;min-height:47px;padding:7px 17px;background:linear-gradient(#93445d,#50243b);border-color:#c98091}#react{left:4%;top:76%;min-height:43px;padding:5px 14px}#reactions{top:68%;left:4%;max-width:92%;gap:2px;flex-wrap:wrap}#reactions button{font-size:21px;min-width:35px;padding:5px}#claims{top:47%;left:9%;right:9%;max-height:23%;padding:10px}#claims p{font-size:11px}.faces .face{width:27px;height:40px}.build-tag{bottom:3%;right:3%;font-size:8px}#cover .cover-cast{filter:brightness(.96)}@media(min-width:700px){#world{inset:0;width:100%;height:100%}.room{background-position:center 43%}.seat{width:24%}#seat2{width:28%}#seat1,#seat3{width:26%}.seat.self{width:40%}.hud{left:5%;top:15%}#badge2{top:28%}#badge1{right:4%;top:49%}#badge3{left:4%;top:49%}#badge0{left:9%}#claims{left:31%;right:31%;top:45%}#discard{right:15%;top:76%}#react{left:15%;top:76%}#turn-status{left:36%;right:36%;top:76%}}
#seat1,#seat3{z-index:4;clip-path:inset(0 0 32% 0)}#badge1,#badge3{top:43%}@media(min-width:700px){#badge1,#badge3{top:49%}}
/* v3: separate fan camera, smaller cast, lacquer-and-brass interface. */
.room{filter:none;background-image:url('assets/room.webp')}
header{left:4%;right:4%;top:max(12px,env(safe-area-inset-top))}header button{width:35px;min-height:35px;font-size:20px;background:radial-gradient(at 30% 20%,#2d3949,#091522 75%);box-shadow:inset 0 0 0 2px #142537,0 0 0 2px #090f19,0 4px 10px #0008;border-color:#a98a54}.logo{position:relative;padding:10px 23px 8px;font-size:34px;line-height:1;letter-spacing:6px;border-radius:19px 7px;background:linear-gradient(130deg,#1f242ddc,#070c13f5 55%,#19212ae6);border-color:#c8a874;box-shadow:inset 0 0 0 3px #121721,inset 0 0 0 4px #8d72474f,0 0 0 3px #050b14b0,0 8px 14px #0007;text-shadow:0 1px #fff3,0 3px 5px #000}.logo::before,.logo::after{content:'◇';position:absolute;top:44%;font-size:12px;line-height:12px;letter-spacing:0;color:#c9a36a;text-shadow:0 0 8px #ddb67666}.logo::before{left:-6px}.logo::after{right:-6px}.logo small{font-size:8px;letter-spacing:2.5px;margin-top:6px}
.hud{top:12.6%;left:3%;gap:3px}.hud span{background:linear-gradient(120deg,#0d192bf2,#0a101bd9);border:1px solid #a688515e;border-left:2px solid #c1a068;border-radius:4px;padding:4px 7px;font-size:8px;box-shadow:0 2px 5px #0007}.hud small{display:inline;font-size:7px;margin-left:5px;color:#bdac8a}#wall-count{color:#e8cf9c}
#seat2{width:29%;z-index:2}#seat1,#seat3{width:26%;clip-path:inset(0 0 23% 0);z-index:4}.seat .sprite{filter:brightness(.98) drop-shadow(0 5px 6px #0009)}.seat.self{width:61%;z-index:4}.seat.self .sprite{filter:brightness(.85) drop-shadow(0 0 10px #0008)}
.seat-badge{min-width:58px;padding:3px 8px 4px;font-size:9px;line-height:1.1;border-radius:8px 3px;background:linear-gradient(140deg,#202634f5,#080f1bf5);box-shadow:inset 0 0 0 2px #0a1020,0 3px 7px #0009;border-color:#b0935f}.seat-badge small{font:6px/1.4 Arial;letter-spacing:.6px;color:#ab9e85;margin-top:2px}.seat-badge.active-seat{border-color:#ead29a;box-shadow:inset 0 0 0 2px #0a1020,0 0 10px #dfb76236}.seat-badge.active-seat::before{content:'◆';font-size:5px;position:absolute;left:4px;top:6px;color:#f8d9a0}#badge1,#badge3,#badge2{right:auto;bottom:auto;transform:translateX(-50%)}#badge0{left:4%;bottom:3%;min-width:85px;padding:6px 12px}
#turn-status{top:74.3%;left:22%;right:22%;background:linear-gradient(90deg,transparent,#0a111dcc 22%,#0a111ddd 78%,transparent);border-top:1px solid #c3a3615c;border-bottom:1px solid #c3a36135;border-radius:0;padding:6px 3px;font-size:9px;letter-spacing:.1px;color:#ecd2a2;text-shadow:0 1px 4px #000}#discard{top:77%;right:5%;width:62px;height:62px;padding:0;min-height:0;border-radius:50%;font-size:13px;border:2px solid #e2b888;background:radial-gradient(at 35% 23%,#eb92aa,#bc5278 48%,#6f294b 83%);box-shadow:inset 0 0 0 3px #652840,inset 0 0 0 4px #edaab585,0 0 0 3px #261522,0 5px 15px #0008;text-shadow:0 1px 3px #4b0c2c}#discard small{font-size:7px;letter-spacing:.6px;margin-top:2px}#discard:disabled{opacity:.47;filter:saturate(.5)}#react{left:5%;top:77%;width:43px;height:47px;min-height:0;padding:3px;font-size:23px;border-radius:12px 4px;background:linear-gradient(130deg,#273545,#091322);box-shadow:inset 0 0 0 2px #172236,0 3px 10px #0008}#react small{font-size:7px;margin-top:3px}#reactions{top:78%;left:19%;right:23%;gap:4px;justify-content:center;padding:6px;border:1px solid #9f824d66;box-shadow:0 7px 18px #0007}#reactions button{font-size:21px;min-width:34px;min-height:35px;border-radius:9px;padding:2px;background:#142134}.hint{bottom:2%;font-size:8px;color:#d5c2a1;text-shadow:0 2px 5px #000}.hint small{font-size:7px;color:#a79984}.build-tag{font-size:7px;color:#a6977e;bottom:3%}
#claims{top:44%;max-height:23%;background:linear-gradient(140deg,#233145f7,#091222fa);border-color:#dab776;border-radius:16px 5px;box-shadow:inset 0 0 0 3px #10192b,0 10px 35px #000b}#claim-options button{border-radius:9px 3px;border-color:#b0925b;font-size:10px;background:linear-gradient(130deg,#26364a,#111d2e)}#pass{border:0;box-shadow:none;background:none;color:#c2b79f;padding:2px 20px;margin-top:5px;min-height:30px;font-size:10px}.faces .face{width:25px;height:36px;box-shadow:0 3px 0 #27796e,0 4px 3px #0006}
@media(min-width:700px){.logo{font-size:37px;padding:11px 36px 9px}.hud{top:15%;left:5%}.hud span{font-size:10px}.hud small{font-size:8px}#seat2{width:19%}#seat1,#seat3{width:21%}.seat.self{width:37%}.seat-badge{font-size:11px;min-width:72px}.seat-badge small{font-size:7px}#badge0{left:11%;bottom:4%}#discard{right:17%;width:69px;height:69px}#react{left:17%;width:47px;height:51px}#turn-status{left:35%;right:35%;font-size:11px}#claims{left:31%;right:31%}#reactions{left:28%;right:28%}.hint{bottom:3%;font-size:9px}.build-tag{right:11%;bottom:4%}}
/* v5: persistent claim controls and uncluttered playing surface. */
#app.playing header .logo{display:none}
#app.playing .hud{top:12%;left:3%}
#react{top:9%;right:4%;left:auto;width:82px;height:39px;display:flex;align-items:center;justify-content:center;gap:7px;padding:4px 8px;font-size:25px;border-radius:10px 4px;z-index:9}
#react span{font:10px/1.2 Georgia,serif}#react small{font:6px/1.4 Arial;letter-spacing:.6px;margin-top:2px}
#reactions{top:calc(9% + 46px);left:auto;right:4%;width:143px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px;z-index:11;background:#101c2eee;border-radius:12px 4px}
#reactions button{min-height:36px;font-size:22px}
#action-bar{position:absolute;z-index:8;top:77.5%;left:5%;right:5%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#action-bar button{height:49px;min-height:44px;padding:5px 2px;border-radius:11px 4px;font:18px/1.05 Georgia,'Noto Serif TC',serif;border:1px solid #a68a59;background:linear-gradient(140deg,#203147,#091322);box-shadow:inset 0 0 0 2px #142135,0 3px 8px #0008;transition:opacity .15s,box-shadow .15s,background .15s}
#action-bar button small{font:7px/1.4 Arial;letter-spacing:.5px;margin-top:4px}
#action-bar button:disabled{opacity:.32;cursor:default}
#action-bar button.available{opacity:1;color:#332612;border-color:#ffe49a;background:linear-gradient(140deg,#fff1b6,#efc660 55%,#c89738);box-shadow:inset 0 0 0 2px #a97d35,inset 0 0 0 3px #ffedab88,0 0 8px #ffdc6fa6,0 0 19px #ffc94555,0 3px 8px #0008;text-shadow:0 1px #fff4cb}
#action-bar button.confirming{outline:2px solid #fff3bb;outline-offset:2px}
#turn-status{top:74.3%;left:5%;right:5%;padding:3px 2px;font-size:8px;line-height:1.2;min-height:17px}
#seat1,#seat3{clip-path:none;isolation:isolate}
#seat1 .sprite,#seat3 .sprite{position:relative;z-index:1;clip-path:inset(0 0 23% 0)}
#seat1::before,#seat3::before{content:'';position:absolute;z-index:0;top:21%;left:-6%;width:112%;height:56%;border-radius:50% 50% 0 0 / 100% 100% 0 0;border:1px solid #c3a46a;background:radial-gradient(ellipse at 50% 65%,#4b5361,#223248 58%,#0a1728 88%);box-shadow:inset 0 0 0 3px #111e30,inset 0 0 0 4px #ae8a4c55,0 5px 10px #0009}
#seat1::after,#seat3::after{content:'';position:absolute;z-index:2;top:76%;left:-3%;width:106%;height:2px;background:linear-gradient(90deg,#654827,#f2dba3,#654827);box-shadow:0 2px 4px #000}
@media(min-width:700px){#react{top:10%;right:5%;width:90px;height:40px}#reactions{top:calc(10% + 48px);right:5%}#action-bar{left:24%;right:24%;gap:10px}#action-bar button{height:53px;font-size:19px}#action-bar button small{font-size:8px}#turn-status{left:24%;right:24%;font-size:10px}}
/* v6: compact settlement sheet with one uninterrupted row of tile faces. */
#result-dialog{width:min(96vw,590px);max-width:590px;max-height:min(88svh,800px);padding:20px 15px 16px;background:linear-gradient(145deg,#243246,#0c182a 43%,#111b2a);box-shadow:inset 0 0 0 3px #0d1726,0 18px 65px #000b}
#result-dialog h2{margin:0 0 4px;font-size:20px;letter-spacing:.5px}
#result-detail{margin:0 0 12px;color:#bdad92;font:11px/1.5 Arial,sans-serif}
#result-hand{display:flex;justify-content:center;align-items:end;flex-wrap:nowrap;gap:1px;width:100%;padding:8px 2px 11px;overflow:hidden;border-block:1px solid #9b7d4b55;background:linear-gradient(90deg,#101d2d,#182941,#101d2d)}
#result-hand .face{flex:0 0 var(--tile-width,24px);width:var(--tile-width,24px);height:calc(var(--tile-width,24px) * 1.44);min-width:0;border-radius:2px;box-shadow:0 2px 0 #228178;background-repeat:no-repeat;background-size:600% 700%}
#score-lines{margin:10px 0 4px;max-height:30svh;overflow:auto}
.score-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:4px 6px;border-bottom:1px solid #b99b6938;font:11px/1.3 Arial,sans-serif;color:#e8d6ba}
.score-row strong{color:#ffe09c;font-size:12px;font-variant-numeric:tabular-nums}
#result-total{white-space:pre-line;background:#0a1527;border:1px solid #b898615e;border-radius:7px;padding:8px;margin:8px 0;color:#ffe0a1;font:12px/1.55 Arial,sans-serif}
#result-bank{padding:8px 10px;margin-bottom:8px;background:linear-gradient(90deg,#4a2c35,#2b2634);border:1px solid #e5b876;border-radius:7px;color:#ffdda0;font:12px Arial,sans-serif}
#result-balance{font:9px/1.5 Arial,sans-serif;color:#b9b8b4;margin:8px 0 12px}
#result-dialog #next{font-size:15px;padding:7px}
/* Settlement: give the fan breakdown room and make the four balances legible. */
#result-dialog{height:min(94svh,900px);max-height:94svh;display:flex;flex-direction:column;gap:0;padding:24px 20px 18px}
#result-dialog:not([open]){display:none}
#result-dialog h2{font:700 25px/1.2 Georgia,'Noto Serif TC',serif;margin-bottom:7px}
#result-detail{font:13px/1.5 system-ui,'Noto Sans TC',sans-serif;margin-bottom:13px}
#result-hand{flex:none;padding:11px 2px 14px}
#result-hand .face{position:relative}
#result-hand .face canvas{display:block;width:100%;height:100%}
#flower-tray{position:absolute;z-index:8;top:22%;left:3%;display:flex;gap:2px;padding:4px;border-radius:6px;background:#0a1726cc;pointer-events:none}
#flower-tray[hidden],#result-flowers[hidden]{display:none}
#flower-tray .face{width:17px;height:25px;overflow:hidden}
#flower-tray .face canvas,#result-flowers .face canvas{display:block;width:100%;height:100%}
#result-flowers{display:flex;justify-content:center;gap:3px;padding:5px 0;flex:none}
#result-flowers .face{width:20px;height:29px;overflow:hidden}

#score-lines{flex:1;min-height:0;max-height:none;overflow:auto;margin:15px 0 10px;scrollbar-color:#ad8b56 transparent}
.score-row{align-items:center;min-height:58px;padding:8px 6px;font-family:system-ui,'Noto Sans TC','PingFang TC',sans-serif}
.fan-name{display:flex;flex-direction:column;gap:3px}
.fan-name b{font-size:19px;line-height:1.2;font-weight:800;color:#fff1ca}
.fan-name small{font-size:11px;letter-spacing:.3px;color:#b8a98f}
.score-row strong{font:800 18px/1 system-ui,'Noto Sans TC',sans-serif;white-space:nowrap}
#result-total{flex:none;padding:9px 12px;margin:0 0 10px;font-family:system-ui,'Noto Sans TC',sans-serif}
.total-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0;font-size:16px;font-weight:700}
.total-row span small{font-size:10px;font-weight:500;color:#bba989}
.total-row strong{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-fu{text-align:right;color:#bba989;font-size:11px}
#result-bank{flex:none;margin-bottom:10px;font:700 14px/1.35 system-ui,'Noto Sans TC',sans-serif}
#result-balance{flex:none;display:grid;grid-template-columns:1fr;gap:2px;margin:0 0 10px;font-family:system-ui,'Noto Sans TC',sans-serif}
.balance-row{display:grid;grid-template-columns:1fr auto 60px;align-items:baseline;gap:7px;padding:4px 7px;border-bottom:1px solid #b99b6928;font-size:13px;color:#d2c6b1}
.balance-row strong{font-size:15px;color:#f1e3c9;font-variant-numeric:tabular-nums;text-align:right}
.balance-row em{font-style:normal;text-align:right;color:#bcb2a2;font-variant-numeric:tabular-nums}
.balance-row.winner-row strong,.balance-row.winner-row em{color:#ffdf8a}
#result-dialog #next{flex:none;min-height:54px;font:700 17px/1.2 system-ui,'Noto Sans TC',sans-serif}
.rolling{display:inline-block;animation:score-turn .18s ease-in-out infinite alternate;transform-origin:center}
@keyframes score-turn{from{transform:perspective(120px) rotateX(-8deg);filter:brightness(.8)}to{transform:perspective(120px) rotateX(8deg);filter:brightness(1.2)}}
@media(max-height:680px){#result-dialog{padding:12px 15px;height:96svh;max-height:96svh}#result-dialog h2{font-size:20px}#result-hand{padding:5px 2px 7px}#score-lines{margin:6px 0}.score-row{min-height:43px;padding:4px}.fan-name b{font-size:16px}.balance-row{padding:2px 5px}.total-row{padding:2px 0}}
@media(prefers-reduced-motion:reduce){.rolling{animation:none}}
#winner-portrait{position:absolute;z-index:1;top:12px;right:16px;width:98px;height:84px;display:block;overflow:hidden;pointer-events:none}
#winner-portrait[hidden]{display:none}
#winner-portrait img{display:block;width:100%;height:auto;animation:winner-pop .55s ease-out both;filter:drop-shadow(0 4px 4px #0008)}
#result-dialog h2,#result-detail{padding-right:102px}
#result-dialog h2{font-size:clamp(19px,5.2vw,25px)}
@keyframes winner-pop{from{transform:translateY(18px) scale(.75);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
#table-magnifier{position:absolute;z-index:9;width:144px;height:144px;pointer-events:none;border-radius:50%;border:5px solid #e5c888;box-shadow:0 9px 25px #000c,inset 0 0 0 2px #405374,0 0 0 2px #473b31;background:#142339;opacity:0;transform:scale(.85);transition:opacity .12s,transform .12s}
#table-magnifier.visible{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){#winner-portrait img{animation:none}#table-magnifier{transition:none}}
#app,#app *{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#claim-tile-preview{position:absolute;z-index:9;left:50%;top:39%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:9px 12px 8px;border-radius:13px;background:#0a1525d9;box-shadow:0 10px 25px #0009}
#claim-tile-preview[hidden]{display:none}
#claim-tile-preview .face{width:86px;height:124px;border:3px solid #f4dfb0;border-radius:6px;box-shadow:0 6px 0 #267d76,0 10px 19px #000b;overflow:hidden}
#claim-tile-preview .face canvas{display:block;width:100%;height:100%}
#claim-tile-preview span{font:700 12px/1.2 system-ui,'Noto Sans TC',sans-serif;color:#ffe6b1;white-space:nowrap;text-shadow:0 2px 4px #000}
#settings-dialog{width:min(90vw,430px);padding:26px 24px 22px}
#settings-dialog h2{font-size:25px;margin-bottom:24px}
#settings-dialog h2 small{font-size:11px;color:#bcab91}
#settings-dialog label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 2px;font:700 18px/1.3 system-ui,'Noto Sans TC',sans-serif}
#settings-dialog label small{font-size:11px;color:#c7b498;font-weight:400}
#settings-dialog output{min-width:3.5em;text-align:right;font:700 20px/1 Georgia,serif;color:#ffdc97}
#settings-dialog input[type=range]{display:block;width:100%;height:36px;margin:2px 0 18px;accent-color:#d9ad6f;touch-action:none}
#settings-dialog .volume-note{font-size:13px;color:#d0bfa4;margin:4px 0 21px}
#settings-dialog .volume-note small{font-size:11px;color:#ac9f8e}
#settings-dialog{max-height:min(90svh,750px);overflow-y:auto;-webkit-overflow-scrolling:touch}
#settings-dialog .settings-section{border-top:1px solid #8d795b88;padding:10px 0 4px}
#settings-dialog .setting-switch{margin:7px 0 8px;cursor:pointer}
#settings-dialog .setting-switch span{flex:1}
#settings-dialog .setting-switch small{margin-top:4px}
#settings-dialog input[type=checkbox]{width:25px;height:25px;flex:none;accent-color:#d9ad6f}
#settings-dialog .settings-section p{font:14px/1.45 system-ui,'Noto Sans TC',sans-serif;color:#d7c6a7;margin:8px 0}
#settings-dialog #offline-cache-status{font-size:12px;color:#ebce91}
#settings-dialog #music-services[hidden]{display:none}
#settings-dialog .music-links{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
#settings-dialog .music-links a{display:inline-flex;align-items:center;gap:6px;min-height:43px;padding:6px 9px;border:1px solid #aa8b59;border-radius:9px;color:#ffe5b3;background:#182536;font:700 13px/1.2 system-ui,sans-serif;text-decoration:none}
#settings-dialog .music-links a:focus-visible{outline:2px solid #faafbf;outline-offset:2px}
#settings-dialog #test-sfx{width:100%;margin:2px 0 6px;min-height:44px;font:700 15px system-ui,'Noto Sans TC',sans-serif}
#settings-dialog #music-help{font-size:12px;color:#d5bf9d}
.platform-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:white;font:700 17px/1 Arial,sans-serif}
.apple-icon{background:linear-gradient(145deg,#ff6a9c,#ad3bd4)}.youtube-icon{background:#e31b23;border-radius:50%;font-size:11px}.spotify-icon{background:#1db954;border-radius:50%;font-size:22px;transform:rotate(-8deg)}
#offline-badge{position:absolute;top:39px;left:0;white-space:nowrap;color:#ffdb92;font-weight:700;font-size:11px}
#offline-badge[hidden]{display:none}
#resume{position:absolute;bottom:7%;left:25%;width:50%;font-size:16px}
#save-status{position:absolute;top:39px;right:0;white-space:nowrap;color:#c9e6c3;font-size:10px}
#cover-version{position:absolute;bottom:2%;left:0;right:0;text-align:center;color:#b6a88d;font-size:11px}
#riichi-button{position:absolute;z-index:9;top:68%;left:50%;transform:translateX(-50%);min-width:124px;min-height:51px;font:700 21px/1 Georgia,'Noto Serif TC',serif;color:#3d2923;border:2px solid #ffe7ad;background:linear-gradient(#ffeda9,#d9a15f);box-shadow:0 3px 14px #0009,0 0 15px #ffdf8770}
#riichi-button small{font-size:9px;margin-top:5px}
#riichi-button[hidden],#riichi-pot[hidden],#result-riichi[hidden]{display:none}
#riichi-button.armed{background:linear-gradient(#ffe4da,#b56e61);color:#3b1b1a}
#riichi-pot{position:absolute;z-index:5;top:49%;left:50%;transform:translateX(-50%);pointer-events:none;display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:8px;background:#0a1a27b9;border:1px solid #bd9e6b;color:#ffe0ac;font:700 11px system-ui,sans-serif;white-space:nowrap}
.riichi-stick{position:relative;display:inline-block;width:53px;height:9px;border:1px solid #a98e72;border-radius:4px;background:linear-gradient(#fff7df,#d7cfbb);box-shadow:0 2px 3px #0009}
.riichi-stick::after{content:'●  ●';position:absolute;inset:0;text-align:center;color:#ac332c;font:8px/8px Arial,sans-serif;letter-spacing:5px}
.seat-badge.riichi-seat{border-color:#eecb80;box-shadow:0 0 8px #ffda775a,inset 0 0 0 2px #0a1020}
.seat-badge .riichi-label{color:#ffca84;font-weight:700}
#result-riichi{margin:5px 0;padding:7px 12px;border:1px solid #cba66d;border-radius:7px;background:#352527;color:#ffdda0;font:700 15px system-ui,'Noto Sans TC',sans-serif}
/* Let the entire settlement sheet scroll when extra yaku and riichi sticks are present. */
#result-dialog{height:auto;min-height:min(82svh,700px);max-height:94svh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-bottom:72px}
#score-lines{flex:none;min-height:auto;max-height:none;overflow:visible}
#result-dialog #next{position:sticky;bottom:0;z-index:3;box-shadow:0 -5px 15px #0b152acc,0 4px 8px #0008}
#portrait-only{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;padding:24px;background:radial-gradient(circle at 50% 40%,#263b50,#0a1422 75%);color:#ffe0a8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overscroll-behavior:none;touch-action:none}
#portrait-only:not([open]){display:none}
#portrait-only::backdrop{background:#0a1422}
#portrait-only .phone-icon{width:66px;height:112px;border:5px solid #e4c188;border-radius:13px;box-shadow:0 0 0 6px #111e2d,0 12px 24px #0008;margin-bottom:23px;position:relative}
#portrait-only .phone-icon::after{content:'';position:absolute;width:15px;height:3px;border-radius:3px;background:#e4c188;bottom:7px;left:50%;transform:translateX(-50%)}
#portrait-only h2{font:700 26px/1.3 system-ui,'Noto Sans TC',sans-serif;margin:0 0 10px}
#portrait-only p{font:15px/1.7 system-ui,'Noto Sans TC',sans-serif;margin:0;color:#d9cbb3}
#portrait-only small{font-size:12px;color:#bda98a}

/* Regional scenes apply at every viewport width. */
 #app.playing[data-mode="hk"] .room{background-image:url('assets/background-hk-v2.jpg');background-position:center center;filter:none}
 #app.playing[data-mode="jp"] .room{background-image:url('assets/background-jp-v2.jpg');background-position:center center;filter:none}
 #app.playing[data-mode="tw"] .room{background-image:url('assets/background-tw-v2.jpg');background-position:center center;filter:none}

/* Bonus flowers sit at each seat's outer table edge, without name panels. */
.flower-tray{position:absolute;z-index:8;max-width:32%;pointer-events:none}
.flower-tray[hidden]{display:none}
.flower-tray .flower-tiles{display:flex;flex-wrap:wrap;gap:2px}
.flower-tray .face{width:17px;height:25px;overflow:hidden;filter:drop-shadow(0 2px 3px #000a)}
.flower-tray .face canvas{display:block;width:100%;height:100%}
#flower-tray-0{top:86%;right:5%;max-width:60%}
#flower-tray-0 .flower-tiles,#flower-tray-1 .flower-tiles{justify-content:flex-end}
#flower-tray-1{top:22%;right:3%}
#flower-tray-2{top:18%;left:67%;max-width:28%}
#flower-tray-3{top:22%;left:3%}
@media(min-width:700px){#flower-tray-0{top:87%;right:24%;max-width:33%}#flower-tray-1{top:27%;right:8%}#flower-tray-2{top:23%;left:61%;max-width:25%}#flower-tray-3{top:27%;left:8%}}

#flower-tray-0 .face{width:24px;height:35px}
#save-status{position:absolute;z-index:9;top:auto;left:auto;right:3%;bottom:6.5%;width:max-content;max-width:55%;padding:3px 5px;border-radius:4px;background:#0a1726cc;color:#d1e6cd;font:9px/1.2 system-ui,'Noto Sans TC',sans-serif;text-align:right;white-space:nowrap;pointer-events:none}
@media(min-width:700px){#save-status{right:10%;bottom:8%}}

/* Supplied cover art: one fixed coordinate system for all three image buttons. */
#app.cover-visible{min-height:0;background:#160d0b}
#app.cover-visible>header,#app.cover-visible>.room{visibility:hidden}
#cover{display:grid;place-items:center;background:#160d0b}
.cover-art{position:relative;width:min(100vw,56.25svh);height:min(100svh,177.777778vw);overflow:visible}
.cover-image{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
#cover .cover-hotspot{position:absolute;left:17.2%;top:var(--y);width:65.8%;height:8.5%;min-height:0;margin:0;padding:0;border:0;border-radius:13% / 45%;background:none;overflow:hidden;box-shadow:none;transform:none;transition:transform .15s ease,filter .15s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#cover .cover-hotspot img{position:absolute;width:151.975684%;height:1176.470588%;max-width:none;left:-26.139818%;top:var(--crop-y);pointer-events:none;user-select:none}
#cover .cover-hotspot:active,#cover .cover-hotspot:focus-visible{transform:translateY(-3px) scale(1.015);filter:brightness(1.17) drop-shadow(0 5px 7px #fbd47b80);outline:2px solid #fff0b9;outline-offset:2px}
@media(hover:hover){#cover .cover-hotspot:hover:not(:disabled){transform:translateY(-3px) scale(1.015);filter:brightness(1.12) drop-shadow(0 5px 7px #fbd47b70)}}
#cover .cover-hotspot:disabled{opacity:1;filter:saturate(.4) brightness(.65);cursor:default;transform:none}
#cover-status{position:absolute;top:90.5%;left:8%;width:84%;margin:0;text-align:center;font:12px/1.4 Arial,sans-serif;color:#ffe6b8;text-shadow:0 1px 4px #000}
#cover #cover-version{position:absolute;bottom:1%;right:3%;top:auto;left:auto;color:#f6dfb6;font:10px Arial,sans-serif}
@media(prefers-reduced-motion:reduce){#cover .cover-hotspot{transition:none}}
#cover-cast{display:none!important}

.cover-tools{position:absolute;z-index:15;top:max(10px,env(safe-area-inset-top));right:12px;display:flex;gap:8px}
.cover-tools button{width:32px;height:32px;min-height:32px;border-radius:50%;padding:7px;background:#101927bb;color:#ffe0a3;border:1px solid #c9a667a0;box-shadow:0 2px 7px #0007}
.cover-tools svg{width:100%;height:100%;display:block}.mute-slash{display:none}.muted .mute-slash{display:block}
#demo-exit{display:none;position:absolute;inset:0;z-index:20;width:100%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0}
#demo-label{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:95%;padding:8px 14px;border-radius:20px;background:#09121dde;color:#ffe6b1;font:bold 12px Arial,sans-serif}
.demo-active #demo-exit{display:block}.demo-active #save-status,.demo-active #offline-badge,.demo-active>header{visibility:hidden}
#demo-curtain{position:absolute;inset:0;z-index:30;background:#080d13;opacity:0;pointer-events:none;transition:opacity .4s ease}#demo-curtain.opaque{opacity:1}
@media(prefers-reduced-motion:reduce){#demo-curtain{transition:none}}

#website-back{position:absolute;left:12px;top:max(10px,env(safe-area-inset-top));z-index:16;color:#ffe3ae;background:#101927bb;border:1px solid #c9a667a0;border-radius:18px;padding:7px 12px;text-decoration:none;font:600 14px/18px Arial,sans-serif;box-shadow:0 2px 7px #0007;-webkit-tap-highlight-color:transparent}#website-back:active{transform:translateY(-2px);filter:brightness(1.2)}

.celebration-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:50;pointer-events:none;border-radius:inherit}.mahjong-callout{position:absolute;z-index:45;left:50%;top:39%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;white-space:nowrap;color:#fff1b5;text-shadow:0 3px 0 #9c572b,0 0 18px #e5a742,0 4px 20px #000;animation:mahjong-call .9s both}.mahjong-callout b{display:block;font:900 clamp(48px,12vw,88px)/1.15 system-ui,sans-serif}.mahjong-callout small{font:bold 13px/1.7 Arial,sans-serif;color:#fff5db;letter-spacing:1px}@keyframes mahjong-call{0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}35%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}@media(prefers-reduced-motion:reduce){.mahjong-callout{animation:none}}

.ambient-petals{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
#claim-tile-preview .face{border:3px solid #ffe66b;box-shadow:0 6px 0 #267d76,0 0 0 2px #eebd38,0 0 15px 5px #ffd84db3,0 0 30px 9px #ffc93359,0 10px 19px #000b}

/* Keep the lower corner clear and place save feedback at the bottom edge. */
#save-status{right:3%;bottom:max(1.5%,env(safe-area-inset-bottom));}

#dora-indicators{padding:4px 6px;background:#0b1829dd;border:1px solid #b29362;border-radius:5px;width:max-content}#dora-indicators[hidden],#abort-nine[hidden]{display:none}.dora-tiles{display:flex;gap:3px;margin:3px 0}.dora-tiles .face{width:20px;height:28px}.dora-tiles canvas{width:100%;height:100%}#abort-nine{position:absolute;z-index:9;left:3%;top:68%;font-size:14px}#table-rules{margin:16px 0;font:14px/1.6 system-ui,sans-serif}#table-rules summary{cursor:pointer;font-weight:700;min-height:44px}#table-rules a{color:#ffe0a0}.result-dora{font-size:12px;margin-top:8px}

/* Keep double taps as game input, including dialog surfaces. */
html,body,#app,dialog{touch-action:manipulation}

#how-to-play{margin:16px 0;padding:12px;border:1px solid #ba995c66;border-radius:9px;text-align:left;font:15px/1.65 system-ui,sans-serif}#how-to-play summary{font-weight:700;cursor:pointer;color:#ffe1a0}#how-to-play h3{font-size:16px;color:#ffe1a0;margin:18px 0 6px}#how-to-play p{margin:10px 0}#how-to-play small{display:block;color:#c6cdd5;font-size:14px}.help-tiles{display:inline-block;background:#f4edd9;color:#172c40;border-radius:4px;padding:3px 7px;margin:3px 0;font-weight:700}

/* v63: independent tablet/desktop landscape composition. Phone rules stay intact. */
.cover-illustration{display:contents}
#app.wide-ui{width:100vw;height:100svh;min-height:0;max-width:none;aspect-ratio:auto}
.wide-ui header{left:2.5%;right:2.5%;top:16px}
.wide-ui header button{width:44px;height:44px;font-size:25px}
.wide-ui .logo{font-size:32px;padding:10px 30px}
.wide-ui #cover{background:url('assets/room.webp') center/cover}
.wide-ui .cover-art{width:100%;height:100%;overflow:hidden}
.wide-ui .cover-illustration{display:block;position:absolute;left:3%;top:50%;transform:translateY(-50%);width:min(55%,82svh);aspect-ratio:.94;overflow:hidden;border-radius:24px;box-shadow:0 15px 45px #0007}
.wide-ui .cover-image{width:100%;height:auto}
.wide-ui #cover .cover-hotspot{left:62%;width:34%;height:auto;aspect-ratio:4.354;border-radius:13% / 45%}
.wide-ui #cover #start{top:32%}.wide-ui #cover #multiplayer{top:49%}.wide-ui #cover #resume{top:66%}
.wide-ui #cover-status{left:61%;width:36%;top:82%;font-size:14px}
.wide-ui .cover-tools{top:16px;right:2.5%;gap:12px}.wide-ui .cover-tools button{width:44px;height:44px}
.wide-ui #website-back{top:16px;left:2.5%;font-size:16px;padding:10px 16px}
.wide-ui .choose-panel{inset:15% 5% 5%;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(220px,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px 30px;padding:24px 30px;align-items:center;justify-content:normal}
.wide-ui .choose-panel h2{grid-column:1;grid-row:1;font-size:25px}.wide-ui .choose-panel h2 small{font-size:14px}
.wide-ui #characters{grid-column:1;grid-row:2/5;gap:12px;align-self:center}
.wide-ui #characters button{font-size:20px;padding:8px 2px 12px;border-radius:16px}
.wide-ui .choose-panel h3{grid-column:2;grid-row:1;font-size:20px}.wide-ui .choose-panel h3 small{font-size:14px}
.wide-ui .styles{grid-column:2;grid-row:2;display:grid;gap:12px;align-self:stretch;align-content:center}
.wide-ui .styles button{font-size:19px;min-height:64px;padding:10px}.wide-ui .styles small{font-size:14px}
.wide-ui #play{grid-column:2;grid-row:3;margin:0;font-size:23px;min-height:62px}.wide-ui #play small{font-size:13px}
.wide-ui #loading{grid-column:2;grid-row:4;font-size:12px;margin:0}
.wide-ui #seat2{width:18%}.wide-ui #seat1,.wide-ui #seat3{width:18%}.wide-ui .seat.self{width:23%}
.wide-ui .seat-badge{font-size:16px;padding:6px 12px;min-width:104px}.wide-ui .seat-badge small{font-size:11px;letter-spacing:.2px}
.wide-ui #badge0{left:2.5%;bottom:2.5%;padding:8px 15px}
.wide-ui #app.playing .hud,.wide-ui.playing .hud{top:12%;left:2.5%;gap:6px}.wide-ui .hud span{font-size:13px;padding:6px 10px}.wide-ui .hud small{font-size:11px}
.wide-ui #react{right:2.5%;top:12%;width:113px;height:48px}.wide-ui #react span{font-size:14px}.wide-ui #react small{font-size:10px}
.wide-ui #reactions{right:2.5%;top:calc(12% + 56px)}
.wide-ui #turn-status{left:19%;right:19%;top:83%;font-size:14px;padding:5px;min-height:25px}
.wide-ui #action-bar{left:22%;right:22%;top:88%;gap:12px}.wide-ui #action-bar button{height:clamp(54px,8svh,78px);font-size:26px}.wide-ui #action-bar button small{font-size:12px}
.wide-ui #riichi-button{top:58%;font-size:22px}.wide-ui #riichi-pot{top:51%;font-size:14px}
.wide-ui #flower-tray-0{top:auto;bottom:9%;right:3%;max-width:16%}.wide-ui #flower-tray-0 .face{width:30px;height:44px}
.wide-ui #flower-tray-1{top:17%;right:3%;max-width:17%}.wide-ui #flower-tray-3{top:17%;left:3%;max-width:17%}.wide-ui #flower-tray-2{top:15%;left:61%;max-width:16%}
.wide-ui .flower-tray .face{width:24px;height:35px}.wide-ui #save-status{right:2.5%;bottom:2%;font-size:11px}
@media(min-width:700px) and (orientation:portrait){.cover-art{width:min(100%,46.40625svh);height:min(82.5svh,177.777778vw)}}

/* v64: supplied landscape artwork and matching image-button coordinates. */
.wide-ui #cover{background:#160d0b}
.wide-ui .cover-art{width:min(100vw,133.333333svh);height:min(100svh,75vw)}
.wide-ui .cover-illustration{display:contents}
.wide-ui .cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.wide-ui #cover .cover-hotspot{left:65.469613%;width:32.458564%;height:12.154696%;aspect-ratio:auto}
.wide-ui #cover .cover-hotspot img{width:308.085106%;height:822.727273%;left:-201.702128%;top:var(--wide-crop-y)}
.wide-ui #cover #start{top:46.408840%;--wide-crop-y:-381.818182%}
.wide-ui #cover #multiplayer{top:59.668508%;--wide-crop-y:-490.909091%}
.wide-ui #cover #resume{top:73.112339%;--wide-crop-y:-601.515152%}
.wide-ui #cover-status{left:65%;width:33%;top:86.5%;font-size:14px}

/* Dedicated wide-screen regional artwork; phone scenes stay unchanged. */
#app.wide-ui.playing[data-mode="jp"] .room{background-image:url('assets/background-jp-wide-v65.jpg');background-position:center center;background-size:cover;filter:none}
#app.wide-ui.playing[data-mode="hk"] .room{background-image:url('assets/background-hk-wide-v65.jpg');background-position:center center;background-size:cover;filter:none}
#app.wide-ui.playing[data-mode="tw"] .room{background-image:url('assets/background-tw-wide-v65.jpg');background-position:center center;background-size:cover;filter:none}

/* v66: annotated tablet/desktop arrangement. */
.wide-ui .choose-panel{inset:15% 5% 5%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:clamp(8px,1.5svh,18px);padding:clamp(16px,2.5svh,30px) 4%}
.wide-ui .choose-panel h2{flex:none;width:100%;text-align:center;margin:0}
.wide-ui #characters{width:100%;max-width:1100px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,28px);align-self:center;flex:1;min-height:0;align-items:center}
.wide-ui #characters button{width:100%;max-width:250px;justify-self:center;padding:6px 4px 10px;font-size:20px}
.wide-ui #characters .sprite{width:min(100%,24svh);margin:auto;aspect-ratio:1}
.wide-ui .choose-panel h3{flex:none;margin:0;text-align:center;font-size:18px}
.wide-ui .styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:82%;max-width:960px;gap:18px;align-self:center;flex:none}
.wide-ui .styles button{min-height:58px;padding:8px;font-size:18px}
.wide-ui #play{width:42%;max-width:520px;min-height:58px;margin-top:auto;flex:none}
.wide-ui #loading{margin:0;flex:none;text-align:center}
.wide-ui #turn-status{top:81.7%;left:22%;right:22%}
.wide-ui #action-bar{top:85%;left:22%;right:22%}
.wide-ui #action-bar button{height:clamp(52px,7svh,70px)}

/* v67: flower trays below the side portraits and compact bilingual actions. */
.wide-ui #flower-tray-1{top:46%;right:2%;max-width:16%}
.wide-ui #flower-tray-3{top:46%;left:2%;max-width:16%}
.wide-ui #flower-tray-2{top:17%;left:61%;max-width:20%}
.wide-ui .flower-tray .flower-tiles{gap:4px}
.wide-ui .flower-tray .face{width:34px;height:50px;flex:none}
.wide-ui #flower-tray-0{top:auto;bottom:6.5%;right:2.5%;max-width:17%}
.wide-ui #flower-tray-0 .face{width:38px;height:55px}
.wide-ui #action-bar button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;height:44px;min-height:44px;padding:5px 6px;font-size:24px;white-space:nowrap}
.wide-ui #action-bar button small{display:inline;margin:0;font-size:12px;line-height:1.2;letter-spacing:0}

/* Tablet and desktop: largest contained landscape 4:3 frame. */
body.frame-4-3{--frame-width:min(100vw,133.333333svh);--frame-height:min(100svh,75vw);width:100vw;height:100svh;min-height:0;overflow:hidden;background:#000;display:grid;place-items:center}
body.frame-4-3 #app.wide-ui{width:var(--frame-width);height:var(--frame-height);min-height:0;max-width:none;aspect-ratio:4/3;container-type:size}
body.frame-4-3 .wide-ui .cover-art{width:100%;height:100%}
body.frame-4-3 .wide-ui .choose-panel{gap:clamp(8px,1.5cqh,18px);padding:clamp(16px,2.5cqh,30px) 4%}
body.frame-4-3 .wide-ui #characters .sprite{width:min(100%,24cqh)}
body.frame-4-3 dialog{box-sizing:border-box;max-width:calc(var(--frame-width) - 24px);max-height:calc(var(--frame-height) - 24px)}
body.frame-4-3 #result-dialog{width:min(590px,calc(var(--frame-width) - 24px));min-height:min(700px,calc(var(--frame-height) - 24px));max-height:calc(var(--frame-height) - 24px)}
body.frame-4-3 #settings-dialog{max-height:calc(var(--frame-height) - 24px)}
#landscape-hint{position:fixed;left:12px;right:12px;top:calc((100svh - var(--frame-height))/4);transform:translateY(-50%);margin:0;text-align:center;color:#d6d6d6;font:14px/1.5 system-ui,sans-serif;pointer-events:none}
#landscape-hint[hidden]{display:none}