/* V8: colorful anime festival artwork and playful, readable game controls. */
:root { --pink:#e880ad; --scene-gold:#f4c97d; }
.lobby-backdrop { background-image:url('assets/sakura-village-v8.webp'); background-position:center; filter:none; }
.lobby-vignette { background:linear-gradient(0deg,#71396650,transparent 34%),linear-gradient(90deg,#a33c7d0a,transparent 60%,#694b941f); }
.site-header { background:linear-gradient(#36478245,transparent); }
.lobby-profile { color:#fff7ef; background:linear-gradient(120deg,#315783ed,#66558ed9); border:2px solid #f5d391; border-radius:15px 3px 15px 3px; box-shadow:0 4px #4a35578a,inset 0 0 0 3px #cce5ff2b; }
.lobby-profile small { color:#f6eacb; }
.lobby-profile strong { text-shadow:0 2px #2f406e; }
.lobby-profile .avatar { border-color:#ffe5aa; }
.profile-flower { color:#ffbde0; text-shadow:0 2px #914b89; }
.brand-type { font-size:34px; font-weight:900; color:#fffce9; -webkit-text-stroke:1px #9b497b; text-shadow:0 3px #995282,2px 0 #995282,-2px 0 #995282,0 0 12px #fff6cda6; }
.brand-type small { color:#fffdf1; -webkit-text-stroke:0; text-shadow:0 1px 3px #534276; }
.cpu-badge { color:#fff7ea; border:1px solid #ffe2a1; background:#526796d9; box-shadow:0 2px #544c6c7a; }
.header-tools .icon-button { color:#653f53; background:linear-gradient(#ffe3a7,#f6b783); border:2px solid #815062; border-radius:11px; box-shadow:0 3px #6f4a68,inset 0 0 0 2px #fff2c7; }
.header-tools .icon-button:hover { background:#fff2c8; transform:translateY(-2px); }
.standing-character { background-image:url('assets/characters-kimono-v8.webp'); left:6%; height:104%; bottom:-12%; filter:drop-shadow(4px 8px 0 #fff4d533) drop-shadow(10px 15px 15px #614b675e); }
.character-intro { left:5%; bottom:30%; max-width:330px; }
.character-tag { color:#995576; background:#fff8e8e8; border:1px solid #ecb9ce; border-left:4px solid #f092b3; border-radius:4px 12px 12px 4px; padding:5px 11px; font-weight:700; text-shadow:none; }
.character-intro h2 { font-size:clamp(32px,3.8vw,55px); color:#fffdf4; text-shadow:0 3px #8b466e,2px 0 #8b466e,-2px 0 #8b466e,0 -1px #8b466e,0 4px 14px #6e345b8a; }
.character-speech { position:relative; background:#fff8f0ed; border:2px solid #e8acc2; border-radius:18px 18px 18px 3px; color:#835169; font-size:13px; font-weight:600; text-shadow:none; box-shadow:0 4px 0 #b878944a; }
.speech-next { color:#d5729e; }
.character-select { bottom:118px; }
.avatar,.character-portrait { background-image:url('assets/characters-kimono-v8.webp'); background-size:800% auto; background-color:#f9ddea; }
.character-choice .character-portrait { background-size:800% auto; background-position-y:12%!important; border:2px solid #fff1cb; border-radius:13px 4px; filter:saturate(.75); box-shadow:0 3px #a3688c,0 0 0 1px #b87599; }
.character-choice.selected .character-portrait { transform:translateY(-5px); border-color:#fff3b3; box-shadow:0 0 0 3px #edb966,0 5px #ae6f7d,0 0 22px #fff0b180; }
.character-choice>strong { color:#fffef2; font-weight:700; text-shadow:0 2px 3px #773d77,1px 0 #773d77,-1px 0 #773d77; }
.character-choice.selected>strong { color:#fff5af; }
.lobby-menu { right:7%; width:38%; max-width:540px; }
.menu-heading h1 { color:#fff2db; text-shadow:0 2px #826382,0 0 5px #61405f; }
.menu-heading .section-kicker { color:#fff5df; text-shadow:0 1px #704b69; }
.menu-rule { background:linear-gradient(90deg,transparent,#fff3be); }
.mode-options { gap:24px; padding:0 6px; }
.mode-card { overflow:visible; justify-content:center; min-height:128px; border:4px solid #f4ce84; outline:2px solid #715260; outline-offset:0; border-radius:28px 7px 28px 7px; background:repeating-linear-gradient(0deg,#a9daea12 0 6px,transparent 6px 18px),linear-gradient(110deg,#3469a2,#637db6); box-shadow:0 6px #684658,0 9px 0 #dfaf7a,0 13px 16px #6443684d,inset 0 0 0 4px #19285388; transform:rotate(-2deg); }
.mode-card.selected { border-color:#ffeab0; background:repeating-linear-gradient(0deg,#d2f4ff20 0 6px,transparent 6px 18px),linear-gradient(110deg,#396fa9,#738cc2); box-shadow:0 6px #67445a,0 9px 0 #e5b978,0 13px 19px #684c6d55,inset 0 0 0 4px #29447799; }
.mode-card::before { inset:8px; border:1px solid #e2efff50; border-radius:17px 0 17px 0; }
.mode-card::after { content:''; width:21px; height:21px; top:calc(50% - 10px); right:-14px; border:2px solid #997153; background:#ffe9b4; transform:rotate(45deg); z-index:2; }
.mode-card:hover { transform:rotate(-2deg) translateY(-3px); filter:brightness(1.07); }
.mode-emblem { display:none; }
.mode-copy { text-align:center; width:100%; }
.mode-copy>strong { font-size:clamp(35px,3.7vw,54px); line-height:1.2; font-weight:900; letter-spacing:.12em; color:#fffdf4; -webkit-text-stroke:1.2px #31283c; text-shadow:0 3px #262138,2px 0 #262138,-2px 0 #262138,0 0 2px #fffdf4; }
.mode-english { display:none; }
.mode-description { margin-top:8px; font-size:12px; font-weight:600; letter-spacing:.09em; color:#fff8e6; text-shadow:0 1px #2e3c62; }
.choice-circle { position:absolute; right:13px; top:11px; width:19px; height:19px; border:1px solid #f6d98d; background:#1c305f66; }
.selected .choice-circle { background:#fff1a2; color:#70546b; box-shadow:0 0 9px #ffffcf77; }
.banner-knot { position:absolute; top:-15px; left:13px; z-index:3; color:#f8d185; font-size:30px; line-height:1; text-shadow:0 2px #977148,1px 0 #94704e,-1px 0 #94704e; transform:rotate(-8deg); }
.banner-flower { position:absolute; left:-18px; bottom:9px; font-size:43px; color:#ffb6dc; line-height:1; text-shadow:0 2px #a25d8e,1px 0 #faedf4; transform:rotate(-10deg); }
.sanma-card,.sanma-card.selected { background:repeating-conic-gradient(from 30deg,#fff0cf10 0deg 30deg,transparent 30deg 60deg) 0 0/34px 34px,linear-gradient(110deg,#dd8d85,#bb7095); transform:rotate(2deg); border-radius:8px 27px 8px 27px; }
.sanma-card:hover { transform:rotate(2deg) translateY(-3px); }
.sanma-card::before { border-radius:0 17px 0 17px; border-color:#ffe7d36b; }
.sanma-card .mode-description { text-shadow:0 1px #995467; }
.banner-lantern { position:absolute; left:-15px; top:28%; width:24px; height:40px; border:2px solid #89604e; border-radius:9px; background:repeating-linear-gradient(0deg,transparent 0 6px,#aa75442a 6px 7px),linear-gradient(90deg,#f3b77d,#ffe4a4,#ec9f67); box-shadow:0 0 15px #ffe9984d; }
.banner-lantern::before,.banner-lantern::after { content:''; position:absolute; left:2px; right:2px; height:5px; border-radius:2px; background:#785262; }
.banner-lantern::before { top:-5px; }.banner-lantern::after { bottom:-5px; }
.match-options { padding-inline:8px; }
.option-label { color:#fffcee; font-weight:700; text-shadow:0 2px 3px #684466,1px 0 #684466; }
.segmented { padding:4px; gap:4px; background:#fff6e9e6; border:2px solid #bf81a3; border-radius:18px; box-shadow:0 3px #9c658459; }
.segmented>button { color:#955f80; font-weight:700; border-radius:13px; }
.segmented>button.selected { color:#fff9eb; background:linear-gradient(#ed99b8,#d876a5); box-shadow:0 2px #b35788,inset 0 0 0 1px #fbc4d5; text-shadow:0 1px #a1567e; }
.mode-summary,.mode-summary>span,.mode-summary>small { color:#fff9ee; text-shadow:0 2px 3px #624762,1px 0 #624762,-1px 0 #624762; font-weight:600; }
.start-game { width:92%; align-self:center; border:3px solid #ffeec1; outline:2px solid #936274; border-radius:22px 7px; background:linear-gradient(110deg,#ffb06d,#ffe2a0 46%,#ffc277); color:#754955; box-shadow:0 5px #b77674,0 8px 0 #6f4b6a66,inset 0 0 0 3px #ffecb96b; text-shadow:0 1px #fff3ca; }
.start-game>span:nth-child(2) { font-size:29px; }
.start-game:hover { box-shadow:0 7px #b77674,0 11px 0 #6f4b6a55; }
.start-decoration { color:#cc765c; }
.menu-bottom { padding:0 10px; }
.menu-bottom .text-button { background:#fff6eceb; padding:6px 12px; border:1px solid #daa2bb; border-radius:14px; color:#945c7b; text-shadow:none; font-weight:600; }
.menu-bottom .text-button>span:first-child { border-color:#c885a7; }
.lobby-dock { height:93px; border-top:0; background:linear-gradient(0deg,#eab2ccae,transparent); box-shadow:none; gap:15px; padding-bottom:7px; align-items:flex-end; }
.lobby-dock>button { flex:0 1 110px; max-width:130px; height:80px; gap:0; border:0; background:none; color:#fffae8; text-shadow:0 2px #694567,1px 0 #694567,-1px 0 #694567; }
.lobby-dock>button svg { width:54px; height:54px; overflow:visible; filter:drop-shadow(0 3px 0 #6e486333); transition:transform .18s; }
.lobby-dock>button>strong { font-size:14px; font-weight:800; }
.lobby-dock>button:hover,.lobby-dock .dock-selected { background:none; color:#fff5b8; }
.lobby-dock>button:hover svg { transform:translateY(-5px) rotate(-5deg); }
.dock-selected::after { bottom:0; left:20%; right:20%; background:#fff0b0; height:3px; border-radius:50%; box-shadow:0 0 9px #fffbe0; }
.falling-petals i { background:#ffaacfe0; box-shadow:0 0 2px #ffeef7; }
.partner-option { border:2px solid #e6b0cd; background:#fff3f8; border-radius:15px; color:#855575; }
.partner-option.selected { border-color:#eeba65; background:#fff2d9; }
.partner-option .character-portrait { background-size:800% auto; background-position-y:12%!important; background-color:#f8ddec; border-radius:10px; }
.partner-option:nth-child(2) .character-portrait { background-color:#d4e8f7; }
.partner-option:nth-child(3) .character-portrait { background-color:#ffdfbb; }
.partner-option:nth-child(4) .character-portrait { background-color:#e4d9f6; }
.modal { background:#fff9f4; border:3px solid #e7b5ca; border-radius:22px 6px; box-shadow:0 12px 0 #b981a34a,0 20px 70px #5e427c6e; }
.modal::backdrop { background:#5a477b78; }
.modal-heading h2 { color:#905778; }
.modal-heading .icon-button { background:#f7dbe8; border-color:#e5b7cf; color:#a3698b; border-radius:12px; }

/* The playing surface stays uncluttered; portraits and declarations carry the color. */
.mahjong-table { background:radial-gradient(ellipse at 50% 28%,#466693,#2c4771 66%,#263657); }
.mahjong-table::before { inset:2% 2% 14%; background:radial-gradient(ellipse at 50% 28%,#446692,#304d78 65%,#293b62); border-width:9px; border-color:#715662; border-top-color:#ab8790; border-bottom-color:#684853; box-shadow:0 0 0 2px #d1af82,0 8px #392b43,inset 0 0 0 2px #203351,inset 0 0 40px #1c2c513d; border-radius:28px 28px 12px 12px; }
.felt-texture { inset:4% 4% 16%; opacity:.45; }
.table-edge { inset:7% 7% 19%; border-color:#a4bad130; border-radius:20px; }
.seat-card .avatar { background-size:800% auto; border:2px solid #ffe1a2; border-radius:8px 2px; box-shadow:0 0 0 2px #805c77,0 5px 10px #24334e66; }
.seat-info { border-color:#e3b88e; background:linear-gradient(#66557eeb,#393c63ee); }
.seat-card.active-turn .avatar { border-color:#fffab9; box-shadow:0 0 0 3px #e8bb6f,0 0 20px #ffe59f66; }
.seat-name { color:#fff3e8; }
.seat-score { color:#ffdc92; }
.human-badge .avatar { background-size:800% auto; border-color:#ffe5ac; box-shadow:0 0 0 2px #ad7396,0 5px 10px #2d285c66; }
.seat-riichi { border-radius:9px 2px; background:linear-gradient(#f187b0,#ac477e); border-color:#ffdda7; text-shadow:0 1px #aa4f74; }
.table-center { background:linear-gradient(135deg,#665378,#34344e); border-color:#968095; border-bottom-color:#51465e; }
.center-main { background:#263e5d; }
.hand-area::before { background:linear-gradient(0deg,#534466ef,#786080b8 75%,#76587d70); border-top-color:#ecc6ac66; }
.action-btn { background:linear-gradient(145deg,#709cc8,#496399); border-color:#ffe2ac; border-radius:14px 3px; box-shadow:0 4px #3c3662,0 7px 12px #1c294d5c,inset 0 0 0 2px #b5c9f733; }
.action-btn.action-riichi { background:linear-gradient(145deg,#ef85b0,#b65491); }
.action-btn.action-chi,.action-btn.action-nuki { background:linear-gradient(145deg,#6dbfae,#397e83); }
.action-btn.action-kan { background:linear-gradient(145deg,#dda873,#9e745b); }
.action-btn.action-win { background:linear-gradient(145deg,#ffe0a2,#efad67); border-color:#fff0ba; }
.call-portrait { background-image:url('assets/characters-kimono-v8.webp'); }
.call-animation { background:linear-gradient(90deg,transparent,#6b6ba3ee 23%,#374872ef 70%,transparent); border-color:#fff0b4; }
.call-riichi { background:linear-gradient(90deg,transparent,#e181afed 23%,#8c4c90ed 70%,transparent); }
.call-win { background:linear-gradient(90deg,transparent,#eabb7bed 23%,#9d7799ed 70%,transparent); }
.call-title { color:#fff8db; text-shadow:0 4px #9d5789,0 0 20px #ffe5b45e; }

@media (min-width:761px) and (min-height:601px) {
 .lobby-menu { top:112px; bottom:116px; gap:14px; }
 .mode-card { min-height:clamp(104px,14dvh,140px); padding:16px; }
 .mode-options { gap:25px; }
 .character-select { left:5%; }
 .start-game { min-height:61px; }
}
@media (min-width:761px) and (min-height:601px) and (max-height:820px) {
 .lobby-menu { top:102px; bottom:109px; gap:11px; }
 .mode-card { min-height:104px; padding:12px; }
 .mode-copy>strong { font-size:41px; }
 .mode-description { font-size:11px; margin-top:6px; }
 .mode-options { gap:22px; }
 .start-game { min-height:55px; }
 .segmented>button { padding:7px; }
}
@media (min-width:1600px) { .standing-character { left:13%; } .lobby-menu { right:9%; max-width:570px; } }
@media (min-width:761px) and (max-width:1100px) and (min-height:601px) { .standing-character { left:0; } .lobby-menu { right:5%; width:43%; } .brand-type { font-size:27px; } .mode-copy>strong { font-size:37px; } .character-intro { width:290px; } }
@media (max-width:760px) and (orientation:portrait) {
 .lobby-profile { width:205px; border-radius:12px 3px; }
 .brand { top:91px; left:18px; }
 .brand-type { font-size:30px; }
 .header-tools .icon-button { width:34px; height:38px; border-radius:9px; }
 .lobby-backdrop { background-position:40% center; }
 .lobby-vignette { background:linear-gradient(0deg,#854c894f,transparent 45%); }
 .standing-character { height:74%; left:-24%; top:19%; bottom:auto; filter:drop-shadow(5px 9px 13px #7653855c); }
 .character-intro { left:14px; bottom:139px; width:46%; max-width:215px; }
 .character-tag { font-size:8px; padding:4px 7px; }
 .character-intro h2 { font-size:29px; letter-spacing:.03em; }
 .character-speech { font-size:10px; padding:9px 10px; margin-top:10px; line-height:1.7; border-radius:15px 15px 15px 2px; }
 .lobby-menu { width:46%; right:15px; top:25%; padding:0; }
 .menu-heading { display:none; }
 .mode-options { gap:24px; padding:0 2px; }
 .mode-card { min-height:112px; padding:14px 6px; border-width:3px; border-radius:18px 4px; }
 .mode-card::before { inset:5px; border-radius:9px 0; }
 .mode-card::after { width:13px; height:13px; right:-9px; top:calc(50% - 7px); }
 .mode-copy>strong { font-size:29px; letter-spacing:.015em; -webkit-text-stroke:.8px #372a41; }
 .mode-description { font-size:8px; letter-spacing:0; line-height:1.7; padding:0 4px; }
 .banner-knot { top:-11px; left:8px; font-size:24px; }
 .banner-flower { left:-12px; bottom:9px; font-size:29px; }
 .banner-lantern { left:-12px; width:18px; height:30px; top:30%; }
 .choice-circle { width:12px; height:12px; top:8px; right:7px; }
 .match-options { padding-inline:0; margin-top:21px; }
 .segmented { padding:3px; gap:1px; border-radius:14px; }
 .segmented>button { padding:8px 1px; font-size:10px; }
 .mode-summary { margin:11px 0; font-size:10px; }
 .mode-summary>small { font-size:8px; }
 .start-game { width:100%; min-height:55px; border-radius:16px 4px; border-width:2px; }
 .start-game>span:nth-child(2) { font-size:25px; letter-spacing:.05em; }
 .start-game small { font-size:6px; }
 .menu-bottom { padding:0; margin-top:12px; }
 .menu-bottom .text-button { font-size:9px; padding:5px 10px; }
 .lobby-dock { height:calc(91px + env(safe-area-inset-bottom)); padding:0 7px max(8px,env(safe-area-inset-bottom)); gap:2px; }
 .lobby-dock>button { height:77px; flex:1; }
 .lobby-dock>button svg { width:45px; height:45px; }
 .lobby-dock>button>strong { font-size:12px; }
 .dock-selected::after { bottom:0; }
 .mahjong-table::before { inset:17% 1.5% 16%; border-width:7px; border-radius:20px; }
 .felt-texture { inset:19% 3% 18%; }
 .table-edge { inset:21% 5% 20%; }
 .partner-option strong { font-size:13px; }
}
@media (max-height:600px) and (orientation:landscape), (max-width:760px) and (orientation:landscape) {
 .lobby-profile { min-width:180px; }
 .brand-type { font-size:26px; }
 .standing-character { height:108%; left:6%; bottom:-18%; }
 .character-intro { bottom:36%; left:4%; width:260px; }
 .character-intro h2 { font-size:32px; }
 .character-speech { font-size:10px; padding:8px 10px; }
 .character-tag { font-size:8px; padding:4px 8px; }
 .character-select { left:4%; bottom:72px; }
 .lobby-menu { top:49%; right:6%; width:40%; max-width:450px; }
 .mode-options { gap:13px; padding:0; }
 .mode-card { min-height:83px; padding:11px 5px; border-width:3px; border-radius:16px 4px; }
 .mode-card::before { inset:5px; border-radius:6px 0; }
 .mode-card::after { width:12px; height:12px; right:-9px; }
 .mode-copy>strong { font-size:28px; letter-spacing:0; -webkit-text-stroke:.8px #30233b; }
 .mode-description { font-size:8px; letter-spacing:0; margin-top:5px; }
 .banner-knot { font-size:22px; top:-10px; left:5px; }
 .banner-flower { font-size:26px; left:-10px; bottom:4px; }
 .banner-lantern { width:17px; height:26px; left:-10px; top:35%; }
 .choice-circle { width:11px; height:11px; right:5px; top:5px; }
 .match-options { padding:0; margin-top:15px; }
 .segmented { padding:3px; gap:3px; border-radius:14px; }
 .segmented>button { font-size:10px; padding:5px; }
 .mode-summary { margin:7px 0; }
 .start-game { width:92%; margin-inline:auto; min-height:44px; border-radius:15px 4px; border-width:2px; }
 .start-game>span:nth-child(2) { font-size:25px; }
 .menu-bottom { margin-top:9px; padding:0 4px; }
 .menu-bottom .text-button { font-size:8px; padding:4px 8px; }
 .lobby-dock { height:62px; gap:18px; padding-bottom:4px; }
 .lobby-dock>button { flex-direction:row; height:53px; flex-basis:100px; max-width:120px; gap:5px; }
 .lobby-dock>button svg { width:38px; height:38px; }
 .lobby-dock>button>strong { font-size:12px; }
 .dock-selected::after { bottom:0; }
 .mahjong-table::before { inset:2% 2% 16%; border-width:6px; border-radius:20px; }
 .felt-texture { inset:4% 4% 18%; }
 .table-edge { inset:7% 7% 19%; }
}
@media (max-height:390px) and (orientation:landscape) {
 .lobby-menu { top:48%; }
 .mode-card { min-height:71px; padding:9px 4px; }
 .mode-copy>strong { font-size:26px; }
 .mode-description { font-size:7px; }
 .menu-bottom { margin-top:7px; }
 .character-intro { bottom:38%; }
 .character-select { bottom:67px; }
 .lobby-dock { height:57px; }
 .lobby-dock>button { height:48px; }
}
@media (max-width:370px) and (orientation:portrait) { .lobby-profile { width:192px; } .brand-type { font-size:28px; } .mode-copy>strong { font-size:27px; } .character-intro h2 { font-size:26px; } .lobby-dock>button svg { width:40px; height:40px; } }