@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#090e18;--panel:#101824;--ink:#eeeae1;--muted:#9aa4b6;--gold:#dab981;--line:#ffffff16;--accent:#f06c59;--serif:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif;--sans:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif}
*{box-sizing:border-box}html{background:var(--bg);font-size:16px}body{margin:0;color:var(--ink);font-family:var(--sans);background:radial-gradient(ellipse at 80% 40%,#142133 0,transparent 65%),var(--bg);min-width:320px}button,select{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{opacity:.32;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button svg{width:21px;height:21px;flex-shrink:0}a{color:var(--gold)}p{line-height:1.9}button{border:0;background:none}h1,h2,p{margin-top:0}h1,h2{font-family:var(--serif)}.shell{max-width:1500px;margin:0 auto;padding:0 56px}.topbar{height:102px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;align-items:center;gap:12px;text-align:left;padding:0;font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.13em}.brand-stamp{width:39px;height:47px;border:1px solid #b88e5c;color:var(--gold);font-size:25px;display:grid;place-items:center;box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px #b88e5c50}.brand small{display:block;font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.26em;color:var(--muted);margin-top:4px}.top-actions{display:flex;align-items:center;gap:16px}.edition,.match-label{font-size:13px;color:var(--muted);letter-spacing:.15em;margin-right:12px}.icon-btn{display:grid;place-items:center;width:42px;height:42px;color:#b5bdca;border:1px solid var(--line);border-radius:50%;padding:9px}.icon-btn:hover{color:var(--gold);border-color:#dab98170}.selection{display:grid;grid-template-columns:1.02fr 1fr;gap:72px;padding:40px 0 30px}.selection-art{position:relative;overflow:hidden;border:1px solid #e9c18c24;min-height:690px;align-self:stretch;background:#121722}.portrait{position:relative;overflow:hidden;aspect-ratio:3/4;flex-shrink:0;background:#111925}.portrait>img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top}.portrait.landscape-art>img{object-position:60% 30%}.portrait.diptych-art>img{width:200%;object-fit:fill}.portrait.diptych-art.reward-art>img{left:-100%}.selection-art>.portrait{position:absolute;width:100%;height:100%;aspect-ratio:auto}.art-shade{position:absolute;inset:0;background:linear-gradient(0deg,#080d17f5 0%,#080d1730 33%,transparent 65%)}.selection-art:after{content:'';position:absolute;inset:12px;border:1px solid #f2ca9722;pointer-events:none}.vertical-caption{position:absolute;top:35px;right:26px;writing-mode:vertical-rl;font-family:var(--serif);letter-spacing:.4em;font-size:15px;color:#ffefd8;text-shadow:0 2px 5px #000}.art-name{position:absolute;bottom:36px;left:38px;display:flex;align-items:flex-start;flex-direction:column}.art-name>span{font-size:14px;letter-spacing:.24em;color:var(--gold)}.art-name>strong{font-size:82px;font-family:var(--serif);font-weight:500;line-height:1.35;letter-spacing:.15em}.art-name>em{font-size:12px;font-style:normal;letter-spacing:.45em;margin-top:12px;color:var(--muted)}.art-corner{position:absolute;bottom:41px;right:30px;font-size:34px;font-family:var(--serif);color:var(--gold)}.art-corner span{font-family:var(--sans);font-size:12px;color:var(--muted);margin-left:8px}.selection-panel{align-self:center;padding:5px 0}.section-kicker{font-size:12px;color:var(--gold);font-weight:500;letter-spacing:.22em;display:flex;align-items:center;gap:12px}.section-kicker>span{height:1px;width:28px;background:var(--gold)}.selection-panel h1{font-size:36px;letter-spacing:.05em;margin:17px 0 16px;font-weight:600}.intro-copy{font-size:15px;color:var(--muted);line-height:1.9;margin-bottom:24px}.rival-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rival-option{position:relative;border:1px solid #ffffff24;padding:0;background:#141b27;text-align:left;overflow:hidden;transition:border-color .2s,transform .2s}.rival-option:hover{transform:translateY(-3px);border-color:var(--rival-color)}.rival-option.active{border-color:var(--rival-color);box-shadow:0 0 0 1px var(--rival-color)}.rival-thumb{height:110px;overflow:hidden;position:relative}.rival-thumb>.portrait{width:100%;position:absolute;top:-13px;transform:scale(1.13);transform-origin:center top}.rival-thumb:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#141b27)}.rival-option>span{padding:9px 12px 13px;display:block}.rival-option small{font-size:10px;color:var(--muted);display:block;white-space:nowrap}.rival-option b{display:block;font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:.1em;margin-top:4px}.rival-option>i{position:absolute;right:10px;bottom:16px;font-size:10px;font-style:normal;color:var(--rival-color)}.rival-option i svg{width:16px;height:16px}.character-copy{padding:23px 0 19px}.character-copy>div{display:flex;align-items:center;gap:10px}.type-tag{font-size:12px;color:var(--play-style-color,var(--gold));border:1px solid color-mix(in srgb,var(--play-style-color,var(--gold)) 45%,transparent);padding:3px 8px;white-space:nowrap}.character-copy h2{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.05em;margin:0}.character-copy p{font-size:14px;color:var(--muted);line-height:1.9;margin:12px 0 0}.character-copy blockquote{font-family:var(--serif);font-size:16px;color:var(--gold);margin:15px 0 0;line-height:1.8}.match-options{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:17px 0}.match-options label{font-size:14px;color:var(--muted)}select{color:var(--ink);background:#141d2b;padding:8px 31px 8px 12px;border:1px solid #ffffff25;font-size:14px;border-radius:2px;max-width:65%}.primary,.secondary{min-height:49px;display:flex;align-items:center;justify-content:center;gap:15px;padding:12px 22px;border:1px solid transparent;font-size:15px;font-weight:500;letter-spacing:.05em;transition:filter .2s,background .2s}.primary{background:linear-gradient(120deg,#ebcca0,#cfa769);color:#201a14;border-color:#f1d7b0;box-shadow:0 3px 18px #d5ab7010}.primary:hover:not(:disabled){filter:brightness(1.12)}.secondary{background:#151f2d;border-color:#ffffff28;color:#d8dfea}.secondary:hover:not(:disabled),.secondary.active{border-color:var(--gold);background:#282a2b;color:var(--gold)}.start-button{width:100%;justify-content:space-between;min-height:58px;padding:14px 24px;font-size:17px}.reward-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 20px;color:var(--muted);font-size:12px;line-height:1.7}.reward-note svg{width:15px;height:15px;flex-shrink:0}.selection-bottom{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.text-button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:#b2bdce;padding:5px 0;min-height:34px}.text-button:hover{color:var(--gold)}.text-button svg{width:16px;height:16px}footer{display:flex;justify-content:space-between;align-items:center;padding:17px 0 24px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.17em;color:#6e7b90;gap:15px}
/* Match surface */
.game-shell{max-width:1600px;padding:0 36px}.game-shell .topbar{height:83px}.match{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:30px;padding:24px 0 32px}.table-area{min-width:0}.round-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-size:14px;color:var(--muted)}.round-header b{font-weight:500;color:var(--gold);margin-right:9px}.round-header i{font-style:normal;padding-left:12px}.table{position:relative;padding:18px 26px 15px;background:radial-gradient(ellipse at center,#18383c,#102a30 65%,#11272d);border:1px solid #476267;box-shadow:0 0 0 5px #101b23,0 0 0 6px #d9b77835,inset 0 0 60px #05181e}.table:before{content:'';position:absolute;inset:8px;border:1px solid #52717545;pointer-events:none}.opponent-bar,.you-bar{display:flex;align-items:center;justify-content:space-between;position:relative;gap:12px;min-height:42px}.player-identity{display:flex;align-items:center;gap:11px}.seat{display:grid;place-items:center;width:34px;height:34px;border:1px solid #bda77d70;color:var(--gold);font-family:var(--serif);font-size:19px}.player-label{font-size:16px;display:block;line-height:1.4}.player-label small{display:inline;font-size:10px;letter-spacing:.1em;color:#94a9ab;margin-left:7px}.player-identity>div>small{display:block;font-size:11px;color:#95a8ad;margin-top:3px}.riichi-label{font-size:12px;letter-spacing:.1em;color:#ff877a}.points{display:flex;align-items:baseline;gap:7px}.points strong{font-family:var(--serif);font-size:31px;line-height:1.2;letter-spacing:.04em;font-weight:600}.points>span{font-size:11px;color:#97aeb1}.life-track{height:3px;margin:9px 0 3px;background:#031419;position:relative}.life-track>span{display:block;height:100%;background:var(--gold);transition:width .6s}.life-track.enemy>span{background:var(--accent)}.hidden-hand{display:flex;justify-content:center;gap:3px;margin:16px 0 13px}.tile{position:relative;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;vertical-align:middle;width:42px;height:61px;background:linear-gradient(110deg,#fffbef,#e9e2d1);border:1px solid #dcd7c9;border-radius:4px;color:#15262a;box-shadow:0 4px 0 #ab9d7d,0 5px 1px #07181c;flex-shrink:0;overflow:hidden;padding:2px 3px;line-height:1}.tile svg{width:100%;height:100%;display:block}.tile .bamboo-face{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.tile-number{font-family:var(--serif);font-size:23px;line-height:1.05;font-weight:700}.tile-suit{font-family:var(--serif);font-size:24px;font-weight:800;margin-top:0;line-height:1.04}.tile .man{color:#b52132}.tile .sou{color:#16604e}.tile .honor{font-family:var(--serif);font-size:32px;font-weight:800}.white-dragon{height:77%;width:86%;border:2px solid #527688;border-radius:3px;box-shadow:inset 0 0 0 2px #f3ebd9,inset 0 0 0 3px #b1c0c1}.tile.small{width:25px;height:35px;padding:1px 2px;border-radius:3px;box-shadow:0 2px 0 #a99e88,0 3px 0 #061c21}.tile.small .tile-number{font-size:14px}.tile.small .tile-suit{font-size:14px}.tile.small .honor{font-size:20px}.tile.small .white-dragon{border-width:1px;box-shadow:none}.tile.back{background:linear-gradient(120deg,#36465c,#182a3c);border-color:#69808c;color:#8d9eae;box-shadow:0 3px 0 #e4ddc9,inset 0 0 0 2px #223247}.tile.back i{display:grid;place-items:center;font-size:14px;font-family:var(--serif);font-style:normal;width:65%;height:70%;border:1px solid #8e9aa847;color:#a7acaa7d}.river{display:flex;justify-content:center;align-content:flex-start;flex-wrap:wrap;gap:5px 3px;max-width:548px;min-height:79px;margin:0 auto;padding:0 0 4px}.river .tile{width:23px;height:32px}.empty-river{color:#66848977;font-size:12px;letter-spacing:.15em;align-self:center}.riichi-tile{border-color:#ff9f81!important;box-shadow:0 2px 0 #b16655!important;transform:translateY(-2px)}.riichi-tile:after{content:'';position:absolute;bottom:0;left:0;right:0;background:#dc604e;height:3px}.last-discard{outline:2px solid #ebcb83;outline-offset:1px}.table-center{display:flex;align-items:center;justify-content:center;gap:35px;padding:11px 0 15px;min-height:120px}.dora-area>span{font-size:10px;letter-spacing:.1em;color:#9db3b6;display:block;margin-bottom:9px}.dora-area>div{display:flex;gap:3px}.dora-area .tile{width:23px;height:32px}.round-medallion{display:flex;flex-direction:column;align-items:center;justify-content:center;width:90px;height:90px;border:1px solid #c2ad7f77;outline:1px solid #90a5a329;outline-offset:5px;background:#0c242b;transform:rotate(0deg);box-shadow:0 0 25px #06171960}.round-medallion small{font-size:10px;color:#a1b0ad;letter-spacing:.15em}.round-medallion strong{font-family:var(--serif);font-size:32px;font-weight:500;color:#e6d0a4;line-height:1.4}.round-medallion span{font-size:10px;color:#a1b0ad}.round-sticks{display:flex;flex-direction:column;gap:15px;width:109px}.round-sticks>div{display:flex;align-items:center;gap:9px}.round-sticks>div>span{font-size:12px;color:#acb9b6}.riichi-stick,.honba-stick{display:block;width:60px;height:5px;background:#e9e4d7;position:relative;box-shadow:0 1px 2px #06161c}.riichi-stick:after{content:'';width:4px;height:4px;border-radius:50%;background:#ba4046;position:absolute;left:28px;top:.5px}.honba-stick:after{content:'···';letter-spacing:1px;line-height:3px;font-size:10px;color:#273947;position:absolute;left:21px;top:0}.own-river{margin-bottom:14px}.hand-zone{padding:24px 0 0}.hand-heading{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:20px;color:#dae0e6}.hand-heading>span>small{font-size:12px;margin-left:12px;color:var(--gold)}.hand-hint{color:#a3b5c3;font-size:12px;line-height:1.7;text-align:right}.hand{display:flex;gap:4px;justify-content:center;min-height:68px;padding-top:7px;align-items:flex-end}.hand .tile{flex:1;max-width:46px;width:auto;min-width:0;transition:transform .12s,box-shadow .12s,filter .12s;height:64px}.hand .tile:disabled{opacity:1;cursor:default}.hand .tile.selected{transform:translateY(-13px);outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 4px 0 #b69769,0 7px 18px #dfc38f40}.hand .tile.drawn{margin-left:12px}.hand .tile.drawn:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#d39b4d}.hand .tile.ready{outline:2px solid #e4c795;outline-offset:0}.hand .tile.ready~.tile:disabled{filter:brightness(.6)}.hand .tile:hover:not(:disabled){filter:brightness(1.07)}.turn-message{min-height:37px;text-align:center;color:#acb8ca;line-height:1.6;font-size:13px;margin:17px 0 9px}.actions{display:flex;gap:9px;justify-content:center}.actions button{min-width:103px}.actions .discard-button{min-width:175px}.actions .win-button:not(:disabled){border-color:var(--gold);color:var(--gold);background:#293132}.actions .primary.win-button{color:#221d16;background:linear-gradient(120deg,#f4d4a4,#cfa66a)}.opponent-panel{padding-top:47px;min-width:0}.match-portrait{position:relative;overflow:hidden;aspect-ratio:3/4;border:1px solid #d9b67c30;background:#121924}.match-portrait>.portrait{height:100%;width:100%}.portrait-shade{position:absolute;inset:0;background:linear-gradient(0deg,#080f1bef,transparent 60%)}.match-portrait .vertical-caption{top:25px;right:15px;font-size:12px}.match-character{position:absolute;bottom:21px;left:24px}.match-character>span:first-child{font-size:11px;letter-spacing:.22em;color:var(--gold)}.match-character h1{font-size:48px;font-weight:500;letter-spacing:.15em;margin:8px 0 14px;line-height:1.2}.dialogue{border:1px solid #ffffff20;border-top:0;background:#121c2b;padding:19px 21px;min-height:134px}.dialogue>span{font-size:12px;color:var(--accent)}.dialogue>p{font-family:var(--serif);font-size:15px;line-height:2;margin:9px 0 0}.goal{display:flex;gap:13px;border-top:1px solid var(--line);padding:24px 3px;margin-top:23px}.goal-icon{border:1px solid #a5875355;width:37px;height:43px;display:grid;place-items:center;color:var(--gold);flex-shrink:0}.goal-icon svg{width:19px;height:19px}.goal b{font-family:var(--serif);font-weight:500;font-size:16px;color:#ceb892}.goal p{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.8}.mobile-avatar{display:none}
/* Dialogs, scoring, and cinematic cut-ins */
.modal{background:linear-gradient(140deg,#182332,#0d1522);color:var(--ink);border:1px solid #d4b77a66;padding:35px;width:min(570px,calc(100vw - 32px));max-height:88dvh;box-shadow:0 25px 150px #0009;overflow:auto;border-radius:2px}.modal::backdrop{background:#040910c9;backdrop-filter:blur(7px)}.modal h2{font-size:27px;font-weight:500;line-height:1.5;margin:13px 0 22px}.modal-close{position:absolute;right:15px;top:15px;width:32px;height:32px}.modal-close svg{width:18px;height:18px}.full{width:100%}.subtle{font-size:14px;color:var(--muted);line-height:1.8}.rules-modal{width:min(680px,calc(100vw - 32px))}.rules-modal h2{margin-bottom:25px}.rule-steps>p{display:flex;gap:17px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.9}.rule-steps>p>b{font-family:var(--serif);font-size:23px;font-weight:400;color:var(--gold)}.rule-steps strong{color:var(--gold);font-weight:500}.rules-modal details{font-size:14px;border-bottom:1px solid var(--line);padding:15px 0;line-height:1.9}.rules-modal summary{font-size:15px;cursor:pointer;color:#dbc398}.rules-modal ul{padding-left:20px}.rules-modal li{margin:9px 0;color:#b5c0d1}.rules-modal details p{color:#b5c0d1;margin-top:15px;margin-bottom:0}.rule-source{font-size:12px;color:var(--muted);margin:22px 0}.demo-buttons{display:flex;flex-direction:column;gap:12px;margin-top:20px}.confirm-actions{display:flex;gap:12px;margin-top:25px}.confirm-actions>*{flex:1}.result-modal{text-align:center}.result-kicker{font-size:11px;letter-spacing:.2em;color:var(--gold)}.result-modal h2{margin:12px 0 17px}.result-limit{font-family:var(--serif);font-size:37px;color:var(--gold);font-weight:700;line-height:1.4}.result-points{font-family:var(--serif);font-size:58px;line-height:1.3;font-weight:500;color:#f3dfb7;margin-top:7px}.result-points>span{font-family:var(--sans);font-size:16px;margin-left:10px;font-weight:400}.fu-han{font-size:13px;color:var(--muted);margin:6px 0 20px}.winning-hand{display:flex;justify-content:center;gap:3px;flex-wrap:wrap;margin:23px 0 26px}.yaku-list{padding:0 12px}.yaku-list>div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}.yaku-list b{font-size:13px;font-weight:400;color:var(--gold)}.result-dora{display:flex;justify-content:center;gap:20px;margin:18px 0}.result-dora>span{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.result-scores{display:flex;justify-content:center;align-items:center;gap:32px;margin:23px 0;border-top:1px solid var(--line);padding-top:20px}.result-scores small{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}.result-scores strong{font-family:var(--serif);font-size:26px;font-weight:500}.result-scores>span{font-size:11px;color:#737f92}.draw-symbol{font-family:var(--serif);font-size:70px;color:#94adc0;margin:20px 0}.tenpai-result{display:flex;justify-content:center;gap:40px}.tenpai-result>span{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted)}.tenpai-result b{color:var(--ink);font-size:16px;font-weight:500}.cutin{position:fixed;inset:0;z-index:100;background:#020612bc;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;cursor:pointer;animation:curtain-in .2s ease}.cutin-band{position:relative;width:100%;height:min(430px,66vh);background:#1a101c;border-top:2px solid #f89e86;border-bottom:2px solid #f89e86;box-shadow:0 0 90px #bf394b44;transform:skewY(-5deg);overflow:hidden;animation:band-in .42s cubic-bezier(.12,.75,.18,1)}.cutin-art{position:absolute;height:900px;width:675px;right:-30px;top:-95px;transform:skewY(5deg);opacity:.9}.cutin-art>.portrait{height:100%;width:100%}.cutin-gradient{position:absolute;inset:0;background:linear-gradient(90deg,#120b17 20%,#1d132666 65%,transparent)}.cutin-copy{position:absolute;inset:30px 8%;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;transform:skewY(5deg);animation:copy-in .6s cubic-bezier(.1,.7,.2,1);text-shadow:0 3px 20px #080812}.cutin-copy>span{font-size:13px;letter-spacing:.28em;color:#efab95}.cutin-copy>strong{font-family:var(--serif);font-size:clamp(70px,10vw,142px);font-weight:900;letter-spacing:.14em;line-height:1.45;color:#fff2df;text-shadow:2px 4px #883632,0 0 35px #f2694380}.cutin-copy>b{font-family:var(--serif);font-size:clamp(28px,4vw,51px);font-weight:600;color:#ffe6ae;line-height:1.3}.cutin-copy i{font-family:var(--sans);font-size:12px;font-style:normal;letter-spacing:.16em;margin-left:13px}.cutin-copy>p{font-family:var(--serif);font-size:17px;color:#f6ddca;line-height:1.8;margin:14px 0 0;max-width:70%}.cutin-skip{position:absolute;bottom:30px;font-size:12px;letter-spacing:.15em;color:#c5beae}.cutin-flash{position:absolute;inset:0;background:white;pointer-events:none;animation:flash .55s ease-out forwards}.cutin.limit .cutin-band,.cutin.high .cutin-band{border-color:#f4d28d;background:#281e0e;box-shadow:0 0 100px #ffc75166}.cutin.limit .cutin-gradient,.cutin.high .cutin-gradient{background:linear-gradient(90deg,#241807 10%,#291c11b8 55%,transparent)}.cutin.limit .cutin-copy>strong,.cutin.high .cutin-copy>strong{color:#fff1b1;text-shadow:2px 5px #9e662e,0 0 45px #f2b2399c}.cutin.high .cutin-band{animation:band-in .35s cubic-bezier(.12,.75,.18,1),impact .3s .4s 2}.player-cutin .cutin-art{opacity:.45;filter:saturate(.65)}.player-cutin .cutin-copy>span{color:#f1dcb2}.player-cutin .cutin-band{border-color:var(--gold)}@keyframes curtain-in{from{opacity:0}to{opacity:1}}@keyframes band-in{from{transform:translateX(-110%) skewY(-5deg)}to{transform:translateX(0) skewY(-5deg)}}@keyframes copy-in{from{opacity:0;transform:translateX(-90px) skewY(5deg)}to{opacity:1;transform:translateX(0) skewY(5deg)}}@keyframes flash{0%{opacity:.8}100%{opacity:0}}@keyframes impact{0%,100%{translate:0 0}30%{translate:5px -2px}70%{translate:-3px 3px}}
/* Match ending */
.ending{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;padding:40px 0 50px;align-items:center;min-height:calc(100dvh - 103px)}.ending-picture{position:relative;overflow:hidden;border:1px solid #dab98144}.ending-picture>.portrait{width:100%}.ending-gradient{position:absolute;inset:0;background:linear-gradient(0deg,#0a111a65,transparent 50%)}.ending-stamp{position:absolute;bottom:25px;right:25px;font-family:var(--serif);font-size:44px;color:#f2d2a3;border:1px solid #dec19b90;display:grid;place-items:center;width:67px;height:83px;background:#11141b5c}.ending-copy h1{font-size:36px;font-weight:500;margin:23px 0 17px}.ending-name{font-size:14px;color:var(--gold);letter-spacing:.03em}.ending-copy blockquote{font-size:19px;font-family:var(--serif);line-height:2.4;margin:34px 0;color:#e5dfd6}.end-scores{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:20px 0;margin:25px 0 30px;gap:15px}.end-scores>span{display:flex;flex-direction:column;font-size:13px;gap:10px;color:var(--muted)}.end-scores b{color:var(--ink);font-family:var(--serif);font-size:28px;font-weight:500}.ending-copy>.secondary{margin-top:12px}
@media(min-width:1500px){.selection{gap:90px}.selection-art{min-height:730px}.selection-panel{max-width:570px}.rival-thumb{height:135px}}
@media(max-width:1200px){.shell{padding:0 32px}.selection{gap:40px}.selection-art{min-height:685px}.selection-panel h1{font-size:31px}.game-shell{padding:0 25px}.match{grid-template-columns:minmax(0,1fr) 260px;gap:24px}.table{padding:18px 18px 15px}.table-center{gap:21px}.hand{gap:3px}.hand .tile{height:57px}.hand .tile.drawn{margin-left:8px}.tile-number{font-size:20px}.tile-suit{font-size:22px}.tile .honor{font-size:28px}.ending{gap:40px}.ending-copy h1{font-size:31px}.ending-copy blockquote{font-size:17px}}
@media(max-width:1000px){.selection{gap:28px}.selection-art{min-height:680px}.selection-panel h1{font-size:27px}.rival-thumb{height:94px}.rival-option small{font-size:9px}.rival-option>span{padding:9px}.rival-option>i{right:6px;bottom:16px;font-size:9px}.rival-option b{font-size:21px}.character-copy p{font-size:13px}.character-copy blockquote{font-size:14px}.match{grid-template-columns:minmax(0,1fr)}.opponent-panel{display:none}.mobile-avatar{display:block;width:46px;height:46px;border:1px solid #b7986070;overflow:hidden;margin-right:0;flex-shrink:0}.mobile-avatar .portrait{width:100%;margin-top:-5px}.opponent-bar .player-identity{margin-right:auto}.hand .tile{max-width:47px;height:65px}.hand .tile-number{font-size:24px}.hand .tile-suit{font-size:25px}.hand .honor{font-size:32px}.table-center{gap:35px}.table{padding:18px 24px 15px}.match{max-width:840px;margin:auto}.river{max-width:598px}.ending-copy blockquote{font-size:16px}.ending-copy h1{font-size:28px}}
@media(max-width:760px){.shell{padding:0 22px}.topbar{height:79px}.brand{font-size:20px;gap:10px}.brand-stamp{width:32px;height:40px;font-size:23px}.brand small{font-size:8px}.top-actions{gap:8px}.edition,.match-label{display:none}.icon-btn{width:37px;height:37px;padding:8px}.selection{grid-template-columns:1fr;gap:0;padding:24px 0}.selection-art{min-height:0;height:340px;border-bottom:0}.selection-art>.portrait{width:100%;height:auto;aspect-ratio:3/4;top:-75px}.selection-art:after{inset:9px;border-bottom:0}.selection-art .vertical-caption{top:22px;right:22px;font-size:14px;letter-spacing:.3em}.art-shade{background:linear-gradient(0deg,#090e18 0,#090e1810 56%,transparent 100%)}.art-name{left:25px;bottom:19px}.art-name>strong{font-size:62px}.art-name>span{font-size:12px;letter-spacing:.22em}.art-name>em{font-size:10px;margin-top:7px}.art-corner{bottom:27px;right:23px;font-size:27px}.selection-panel{padding:8px 0 0}.selection-panel>.section-kicker{font-size:10px;letter-spacing:.2em}.selection-panel h1{font-size:29px;margin:15px 0}.intro-copy{font-size:14px;line-height:1.8;margin-bottom:20px}.rival-options{gap:10px}.rival-thumb{height:115px}.rival-thumb>.portrait{top:-15px}.rival-option>span{padding:8px 11px 11px}.rival-option small{font-size:10px}.rival-option b{font-size:24px}.rival-option>i{right:10px;font-size:10px}.character-copy{padding:22px 0 17px}.character-copy p{font-size:14px}.character-copy blockquote{font-size:15px}.match-options{padding:14px 0}.reward-note{margin-bottom:14px}.selection-bottom{padding-top:12px}footer{font-size:9px;line-height:1.7;letter-spacing:.07em;padding-bottom:22px}.game-shell{padding:0 18px}.game-shell .topbar{height:72px}.match{padding-top:13px}.round-header{margin-bottom:12px;font-size:12px}.round-header .text-button{font-size:12px}.round-header i{padding-left:5px}.table{padding:14px 14px 12px}.player-label{font-size:14px}.player-label small{font-size:9px}.points strong{font-size:28px}.seat{width:28px;height:31px;font-size:17px}.player-identity{gap:8px}.hidden-hand{margin:13px 0 11px;gap:3px}.hidden-hand .tile{width:22px;height:31px}.river{max-width:100%;gap:5px 3px;min-height:71px}.river .tile{width:21px;height:30px}.river .tile-number,.river .tile-suit{font-size:13px}.river .honor{font-size:18px}.table-center{padding:10px 0 12px;min-height:110px;gap:24px}.round-medallion{width:77px;height:77px;outline-offset:4px}.round-medallion strong{font-size:28px}.dora-area .tile{width:20px;height:28px}.dora-area .tile-number,.dora-area .tile-suit{font-size:12px}.dora-area .honor{font-size:18px}.dora-area>div{gap:2px}.round-sticks{width:77px}.riichi-stick,.honba-stick{width:44px}.riichi-stick:after{left:20px}.honba-stick:after{left:13px}.round-sticks>div{gap:7px}.round-sticks>div>span{font-size:11px}.own-river{margin-bottom:9px}.hand-heading{margin-bottom:15px}.hand-hint{font-size:11px;max-width:60%}.turn-message{font-size:12px}.actions .discard-button{min-width:0;flex:1.4}.actions button{min-width:0;flex:1;padding:11px 10px;font-size:14px}.ending{grid-template-columns:1fr;gap:26px;min-height:0;padding:24px 0 40px}.ending-picture{max-height:550px}.ending-copy{padding:0 3px}.ending-copy h1{font-size:29px}.ending-copy blockquote{font-size:17px;line-height:2.1;margin:22px 0}.end-scores{margin-top:22px}.modal{padding:28px 24px}.modal h2{font-size:24px}.cutin-band{height:370px}.cutin-art{width:540px;height:720px;right:-180px;top:-50px}.cutin-copy{inset:25px 7%}.cutin-copy>strong{font-size:81px;letter-spacing:.08em}.cutin-copy>span{font-size:10px;letter-spacing:.17em}.cutin-copy>p{font-size:15px;max-width:80%}.cutin-copy>b{font-size:37px}.cutin-gradient{background:linear-gradient(90deg,#120b17ed,#1d1326a3 60%,#1d132630)}.cutin.limit .cutin-gradient,.cutin.high .cutin-gradient{background:linear-gradient(90deg,#241807ed,#291c11ae 60%,#291c1120)}}
@media(max-width:540px){.hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px 5px;justify-items:stretch;align-items:end;padding:5px 0 3px;min-height:119px}.hand .tile{width:100%;max-width:none;height:53px}.hand .tile-number{font-size:21px}.hand .tile-suit{font-size:23px}.hand .honor{font-size:28px}.hand .tile.drawn{margin-left:0}.hand .tile.selected{transform:translateY(-6px);outline-offset:1px}.hand-zone{padding-top:21px}.hand-heading{margin-bottom:11px}.turn-message{min-height:36px;margin:12px 0 4px}.actions{position:sticky;bottom:0;background:linear-gradient(0deg,#090e18 75%,transparent);padding:5px 0 max(8px,env(safe-area-inset-bottom));z-index:2}.table-center{gap:14px}.table{padding:12px 12px 10px}.game-shell{padding:0 14px}.hidden-hand{gap:2px}.hidden-hand .tile{width:19px;height:27px}.hidden-hand .back i{font-size:11px}.table-center{min-height:101px}.round-medallion{width:65px;height:69px}.round-medallion strong{font-size:26px}.dora-area>span{font-size:10px}.dora-area .tile{width:18px;height:25px}.dora-area .tile-number,.dora-area .tile-suit{font-size:11px}.dora-area .honor{font-size:16px}.dora-area .back i{font-size:11px}.round-sticks{width:65px;gap:12px}.riichi-stick,.honba-stick{width:36px}.riichi-stick:after{left:16px}.honba-stick:after{left:10px}.river{min-height:64px;gap:5px 3px;max-width:310px}.river .tile{width:21px;height:30px}.mobile-avatar{width:40px;height:42px}.points strong{font-size:26px}.player-label small{display:none}.winning-hand{gap:3px}.winning-hand .tile{width:24px;height:33px}.result-points{font-size:50px}.result-scores{gap:25px}.tenpai-result{gap:26px}.rule-steps>p{font-size:14px;gap:12px}.rules-modal details{font-size:13px}.rules-modal summary{font-size:14px}.confirm-actions{gap:8px}.confirm-actions .primary,.confirm-actions .secondary{padding:12px;font-size:14px}}
@media(max-width:360px){.shell{padding:0 16px}.game-shell{padding:0 11px}.selection-art{height:295px}.selection-art>.portrait{top:-55px}.rival-thumb{height:94px}.rival-option small{font-size:9px}.rival-option>i{font-size:9px;right:7px}.rival-option>span{padding:8px}.rival-option b{font-size:23px}.selection-panel h1{font-size:26px}.table-center{gap:9px}.round-sticks{width:57px}.points strong{font-size:24px}.hand .tile{height:50px}.cutin-copy>strong{font-size:68px}.reward-note{font-size:11px}.modal{padding:28px 19px}.brand{font-size:18px}.brand small{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.cutin-flash{display:none}}

/* saylo雀 — opening and main menu */


.rival-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.rival-option{display:flex;align-items:center;min-width:0;min-height:88px}
.rival-thumb{width:64px;height:90px;flex:0 0 64px}
.rival-thumb>.portrait{top:0;transform:none}
.rival-thumb>.standalone-art{width:180%;margin-left:-40%}
.mobile-avatar>.standalone-art{width:170%;margin-left:-35%;margin-top:-4px}
.rival-option>span{padding:10px;min-width:0}
.rival-option small{font-size:12px;white-space:normal;line-height:1.4}
.rival-option b{font-size:21px;letter-spacing:.02em;line-height:1.4}
.rival-option>i{display:none}
.art-name{right:24px}
.art-name>strong.long-name{font-size:clamp(36px,5vw,64px);letter-spacing:.06em}
.art-name>em{font-size:14px;letter-spacing:.16em}
.art-corner{top:24px;left:25px;bottom:auto;right:auto}
.character-copy p.character-credit{font-size:12px;margin-top:14px;color:#97a9bf}
.character-copy>div{flex-wrap:wrap}
.mobile-dialogue{display:none}
.result-reaction{display:flex;gap:14px;align-items:center;margin:20px 0;text-align:left;background:#182332;padding:13px;border-left:2px solid #78bde8}
.result-reaction>.portrait{width:60px;height:80px}
.result-reaction>.standalone-art>img{width:170%;height:170%;max-width:none;left:-35%;top:-4%}.result-reaction>.landscape-art>img{width:100%;height:100%;left:0;top:0;object-position:60% 30%}
.result-reaction>blockquote{font-family:var(--serif);font-size:16px;line-height:1.8;margin:0;min-width:0}
.result-reaction>blockquote>span:first-child{display:block;font-family:var(--sans);font-size:12px;color:#a9c8df;margin-bottom:4px}
.cutin.rival-reaction .cutin-art{opacity:1;filter:none}
.cutin.rival-reaction.loss-high .cutin-band{border-color:#eb8276;background:#24131b;box-shadow:0 0 90px #b83e4444}
.cutin.rival-reaction.loss-yakuman .cutin-band{border-color:#b8a4df;background:#181325;box-shadow:0 0 100px #69519255}
.cutin.rival-reaction.loss-high .cutin-copy>strong{text-shadow:2px 4px #78333a,0 0 28px #d3665355}
.cutin.rival-reaction.loss-yakuman .cutin-copy>strong{color:#f1e9ff;text-shadow:2px 4px #4a385f,0 0 28px #937dbd55}
.cutin.has-expressions .cutin-art{inset:0 0 0 auto;width:78%;height:100%;opacity:1}.cutin.has-expressions .cutin-art>.portrait{aspect-ratio:auto}.cutin.has-expressions .cutin-art img{object-fit:contain;object-position:right top}
.cutin-copy>p>small{display:block;font-family:var(--sans);font-size:12px;color:#b9d2df;margin-bottom:3px}
.quote-translation{display:block;margin-top:.3em;font-family:var(--sans);font-size:.9em;line-height:1.6;font-weight:400;letter-spacing:normal;color:#cbd3df}
.cutin-copy>p:has(.quote-translation){overflow-y:auto;min-height:0;max-height:40%;overscroll-behavior:contain}
.cutin-loading{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#050c18ed;color:#d7e6f2}
.cutin-loading p{font-size:16px;margin:0}
.loading-ring{width:32px;height:32px;border:2px solid #7cbfea33;border-top-color:#7cbfea;border-radius:50%;animation:loading-turn .8s linear infinite}
@keyframes loading-turn{to{transform:rotate(360deg)}}
.cutin.has-expressions .cutin-gradient{background:linear-gradient(90deg,#101725 4%,#101725db 28%,#18233318 65%,transparent)}
.cutin.has-expressions.limit .cutin-gradient,.cutin.has-expressions.high .cutin-gradient{background:linear-gradient(90deg,#241807 4%,#241807db 28%,#291c1118 65%,transparent)}
.demo-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.demo-buttons button{font-size:14px;padding:12px 8px;letter-spacing:0}
.demo-buttons.image-previews>button{display:block;overflow:hidden;padding:0;text-align:left}
.demo-buttons.image-previews img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.demo-buttons.image-previews span{display:block;padding:10px;font-size:14px;line-height:1.4}
.ending-picture.has-standalone{max-height:none;align-self:start}
.ending-picture.has-standalone .reward-art>img{object-fit:contain}
.ending-asset{position:relative;aspect-ratio:var(--ending-aspect,3/4);width:100%;background:#111925}
.ending-asset>.portrait{position:absolute;inset:0;width:100%;height:100%}
.ending-image-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.ending-image-status p{font-size:16px;line-height:1.8;margin:0}
.ending-gradient,.ending-stamp{pointer-events:none}
@media(max-width:1000px){
  .mobile-dialogue{display:flex;gap:10px;align-items:baseline;margin-top:15px;padding:10px 12px;background:#121c2b;border-left:2px solid var(--accent)}
  .mobile-dialogue>span{font-size:12px;flex-shrink:0;color:var(--accent)}
  .mobile-dialogue>p{font-family:var(--serif);font-size:14px;line-height:1.7;margin:0}
}
@media(max-width:760px){
  .art-name>strong.long-name{font-size:clamp(38px,10vw,58px)}
  .art-corner{top:20px;left:22px;bottom:auto;right:auto}
  .selection-art>.standalone-art{top:0}
  .cutin.has-expressions .cutin-band{height:min(420px,65svh)}
  .cutin.has-expressions .cutin-art{inset:0;width:100%;height:100%;transform:skewY(5deg)}
  .cutin.has-expressions .cutin-art img{object-position:center top}
  .cutin.has-expressions .cutin-copy{inset:20px 6% 24px;justify-content:flex-end}
  .cutin.has-expressions .cutin-gradient,.cutin.has-expressions.limit .cutin-gradient,.cutin.has-expressions.high .cutin-gradient{background:linear-gradient(0deg,#101725f5 0%,#101725d9 20%,#10172540 42%,transparent 66%)}
  .cutin.has-expressions .cutin-copy>p{max-width:94%;font-size:14px}
  .cutin.has-expressions .cutin-copy>strong{font-size:clamp(48px,15vw,72px);line-height:1.18}.cutin.has-expressions .cutin-copy>span{font-size:12px;letter-spacing:.12em}
}
@media(max-width:380px){.rival-thumb{width:52px;flex-basis:52px;height:82px}.rival-option>span{padding:8px}.rival-option b{font-size:18px}}
.saylo-brand{letter-spacing:.035em}
.nav-home{min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;font-size:14px;white-space:nowrap;color:var(--gold)}
.nav-home:hover{border-color:var(--gold);background:#d4b77a12}
.result-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px}
.result-actions>button{min-width:0;padding:12px 8px;font-size:14px;gap:6px}
.return-confirm{text-align:left}
.return-confirm .confirm-actions>button{min-width:0;padding:12px 8px;font-size:14px}
@media(max-width:400px){.topbar{gap:8px}.topbar .brand-stamp{display:none}.topbar .saylo-brand{font-size:18px}.topbar .top-actions{gap:6px}.nav-home{padding:8px 6px}}
.saylo-brand small{font-size:12px;letter-spacing:.2em}
.opening-shell{position:relative;overflow:hidden;background:radial-gradient(ellipse at 9% 36%,#28344870,transparent 56%),#080d16;min-height:100svh}
.opening-topbar{position:relative;z-index:5;max-width:1500px;margin:auto;height:80px;padding:0 56px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.opening-edition{font-size:13px;letter-spacing:.15em;color:#a8afbe;line-height:1.6}
.opening-topbar .icon-btn{background:#0b111a80}
.opening{isolation:isolate;position:relative;display:flex;align-items:center;max-width:1500px;margin:auto;min-height:650px;height:calc(100svh - 133px);max-height:1050px}
.opening-artwork{position:absolute;z-index:-1;inset:-40px -20px -15px 43%;display:flex;gap:6px;transform:skewX(-7deg);overflow:hidden;pointer-events:none}
.opening-rival{position:relative;flex:1;min-width:0;overflow:hidden;background:#111925;border-left:1px solid color-mix(in srgb,var(--rival-color) 60%,transparent);border-right:1px solid #e6c09e20}
.opening-rival-0{margin-top:38px;margin-bottom:10px}
.opening-rival-1{margin-top:0;margin-bottom:44px}
.opening-rival-2{margin-top:26px;margin-bottom:0}
.opening-rival-3{margin-top:8px;margin-bottom:30px}
.opening-rival-0{flex:1.18}
.opening-crop{position:absolute;inset:-25px -42px;overflow:hidden;transform:skewX(7deg)}
.opening-crop img{position:absolute;top:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-25%);filter:saturate(.83) contrast(1.04)}
.opening-crop.opening-single img{transform:translateX(-50%)}
.opening-rival-shade{position:absolute;inset:0;background:linear-gradient(0deg,#070d18 1%,#070d1810 55%,#070d1815),linear-gradient(90deg,#06091460,transparent 36%)}
.opening-rival-name{position:absolute;bottom:70px;right:25px;writing-mode:vertical-rl;color:#ffe9cf;letter-spacing:.25em;font-family:var(--serif);font-size:30px;text-shadow:0 3px 10px #000;transform:skewX(7deg)}
.opening-rival-name small{font-family:var(--sans);font-size:12px;color:var(--rival-color);letter-spacing:.25em;margin-bottom:14px}
.opening-art-veil{position:absolute;inset:0;background:linear-gradient(90deg,#090f19 0,transparent 16%),linear-gradient(0deg,#080d16,transparent 23%,transparent 87%,#080d1660);pointer-events:none}
.opening-content{position:relative;width:47%;padding:18px 0 26px 56px;z-index:2}
.opening-logo-block{margin-bottom:31px;width:fit-content;max-width:100%}
.opening-overline{font-family:var(--serif);font-size:17px;color:#deceb8;letter-spacing:.24em;margin:0 0 12px 5px;line-height:1.8}
.opening-logo{display:flex;align-items:baseline;gap:10px;white-space:nowrap;margin:0;line-height:1.05;filter:drop-shadow(0 6px 22px #090e19);overflow:visible}
.opening-logo>span{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:clamp(5rem,9.7vw,9.5rem);letter-spacing:-.065em;color:#fff8e9;text-shadow:0 2px 0 #a29a9040}
.opening-logo>strong{font-family:var(--serif);font-size:clamp(6rem,12.8vw,12.6rem);font-weight:900;line-height:1.18;letter-spacing:-.09em;transform:rotate(-7deg);display:block;background:linear-gradient(155deg,#fff4d6 15%,#f7d3a0 37%,#be894f 72%,#efd3a6);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(3px 4px 0 #652d28)}
.opening-logo-rule{display:flex;align-items:center;gap:18px;margin:13px 0 0 8px}
.opening-logo-rule>span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#cfb181)}
.opening-logo-rule>span:last-child{transform:rotate(180deg)}
.opening-logo-rule>p{font-size:12px;font-weight:500;letter-spacing:.44em;color:#d5bb93;margin:0;padding-left:.44em;white-space:nowrap}
.opening-menu{display:flex;flex-direction:column;gap:12px;max-width:430px}
.opening-mode{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:16px 21px;min-height:104px;text-align:left;isolation:isolate;transition:transform .2s,box-shadow .2s,background .2s}
.mode-available{color:#211a15;background:linear-gradient(112deg,#f4d8ae,#d0a873);border:1px solid #f9e0b4;box-shadow:0 8px 35px #080a1380}
.mode-available:before{content:'';position:absolute;inset:5px;border:1px solid #644f3240;z-index:-1}
.mode-available:hover{transform:translateX(5px);background:linear-gradient(112deg,#ffeac8,#dbb884);box-shadow:0 5px 35px #d1ab7030}
.mode-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.mode-copy>small{font-size:12px;letter-spacing:.24em;line-height:1.2;opacity:.75}
.mode-copy>b{font-family:var(--serif);font-size:25px;letter-spacing:.07em;font-weight:700;line-height:1.4}
.mode-copy>span{font-size:13px;line-height:1.5;color:#624d3b}
.mode-arrow{width:41px;height:41px;flex-shrink:0;border:1px solid #533d3660;display:grid;place-items:center;border-radius:50%}
.mode-arrow svg{width:22px;height:22px}
.opening-mode.mode-upcoming{opacity:1;background:linear-gradient(110deg,#121b2bd9,#101a2c99);border:1px solid #777f994d;color:#abb3c2;box-shadow:0 5px 25px #080a1370}
.mode-upcoming .mode-copy>small{color:#95a1b6}
.mode-upcoming .mode-copy>b{font-size:21px;font-weight:500}
.mode-upcoming .mode-copy>span{color:#8998ae}
.mode-status{font-size:12px;color:#c0b598;border:1px solid #b7a37d40;padding:5px 8px;white-space:nowrap;background:#131c29}
.opening-utilities{display:flex;gap:27px;align-items:center;padding:18px 0 0 3px;max-width:430px}
.opening-utilities .text-button{font-size:14px;color:#b5bfd1;min-height:40px}
.opening-utilities .text-button:hover{color:var(--gold)}
.opening-footer{max-width:1388px;margin:0 auto;padding:15px 0 21px;position:relative;z-index:3;border-top:1px solid #f3d3a31b}
.opening-footer>span{font-size:12px;letter-spacing:.1em;color:#8c97ac}
.opening-footer>span:first-child{font-family:var(--serif);color:#baad96;font-size:14px;letter-spacing:.07em}
.opening-enter .opening-rival{animation:title-rival-in .85s cubic-bezier(.16,.74,.17,1) both;animation-delay:calc(var(--rival-order)*.16s)}
.opening-enter .opening-logo-block{animation:title-logo-in .9s .4s cubic-bezier(.2,.7,.2,1) both}
.opening-enter .opening-menu{animation:title-menu-in .7s .9s ease both}
.opening-enter .opening-utilities{animation:title-menu-in .6s 1.1s ease both}
@keyframes title-rival-in{from{opacity:0;translate:0 90px;filter:brightness(1.8)}to{opacity:1;translate:0 0;filter:brightness(1)}}
@keyframes title-logo-in{from{opacity:0;transform:translateX(-24px) scale(1.03)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes title-menu-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1499px){.opening-footer{margin:0 56px}}
@media(max-width:1150px){
  .opening-topbar{padding:0 38px}.opening-content{padding-left:38px;width:49%}.opening-logo>span{font-size:clamp(5rem,10.8vw,8rem)}.opening-logo>strong{font-size:clamp(6.5rem,13.5vw,10rem)}
  .opening-menu{max-width:365px}.opening-mode{padding:15px 19px}.mode-copy>b{font-size:23px}.mode-upcoming .mode-copy>b{font-size:19px}.opening-artwork{left:44%}.opening-footer{margin:0 38px}.opening-rival-name{right:14px;font-size:27px}.opening-rival-name small{font-size:12px}
}
@media(max-width:800px){
  .opening-topbar{height:70px;padding:0 25px}.opening-edition{font-size:12px;letter-spacing:.1em}.opening{min-height:650px;height:calc(100svh - 123px)}
  .opening-content{padding-left:25px;width:55%}.opening-logo>span{font-size:5.3rem}.opening-logo>strong{font-size:7rem}.opening-overline{font-size:15px;letter-spacing:.15em}
  .opening-logo-block{margin-bottom:26px}.opening-artwork{left:40%;right:-50px;opacity:.88}.opening-art-veil{background:linear-gradient(90deg,#090f19 0,#090f1930 30%,transparent 50%),linear-gradient(0deg,#080d16,transparent 23%)}
  .opening-menu{max-width:315px}.mode-copy>b{font-size:21px}.mode-copy>span{font-size:12px}.mode-upcoming .mode-copy>b{font-size:18px}.opening-mode{gap:9px;padding:15px 17px}.mode-arrow{width:35px;height:35px}.mode-status{font-size:12px;padding:4px 6px}.opening-utilities{gap:18px}.opening-utilities .text-button{font-size:13px}.opening-footer{margin:0 25px}
}
@media(max-width:600px){
  .opening-topbar{height:64px;padding:0 20px;gap:12px}.opening-edition{font-size:12px;letter-spacing:.025em}.opening-topbar .top-actions{gap:7px}.opening-topbar .icon-btn{width:35px;height:35px}
  .opening{display:block;min-height:calc(100svh - 115px);height:auto;max-height:none;padding:235px 24px 18px}
  .opening-artwork{left:-12px;right:-12px;top:-2px;bottom:auto;height:438px;gap:4px;opacity:1;transform:skewX(-5deg)}
  .opening-rival-0{margin-top:14px;margin-bottom:15px}.opening-rival-1{margin-top:0;margin-bottom:30px}.opening-rival-2{margin-top:15px;margin-bottom:0}
  .opening-crop{inset:-5px -20px;transform:skewX(5deg)}.opening-crop img{height:108%;top:-5px;filter:saturate(.85)}.opening-rival-shade{background:linear-gradient(0deg,#080d16,transparent 77%)}
  .opening-art-veil{background:linear-gradient(0deg,#080d16 0%,#080d16df 16%,#080d1620 57%,transparent 82%)}.opening-rival-name{display:none}
  .opening-content{width:100%;max-width:400px;margin:auto;padding:0}.opening-logo-block{width:100%;margin:0 auto 25px;text-align:center}.opening-overline{font-size:14px;letter-spacing:.15em;margin:0 0 8px;line-height:1.8;color:#f1dfc6;text-shadow:0 2px 10px #000}
  .opening-logo{justify-content:center;gap:9px;filter:drop-shadow(0 5px 15px #080d16)}.opening-logo>span{font-size:clamp(3.6rem,18vw,5.4rem)}.opening-logo>strong{font-size:clamp(5.3rem,25vw,7.5rem)}
  .opening-logo-rule{margin:10px 13px 0;gap:14px}.opening-logo-rule>p{font-size:12px;letter-spacing:.36em}.opening-menu{max-width:none;gap:10px}.opening-mode{min-height:97px;padding:14px 20px}
  .mode-copy{gap:4px}.mode-copy>small{font-size:12px}.mode-copy>b{font-size:23px}.mode-copy>span{font-size:13px}.mode-upcoming .mode-copy>b{font-size:20px}.mode-arrow{width:38px;height:38px}.mode-status{padding:5px 8px}
  .opening-utilities{justify-content:center;gap:32px;padding:13px 0 0;max-width:none}.opening-utilities .text-button{font-size:14px;min-height:40px}.opening-footer{margin:0 24px;padding:14px 0 max(17px,env(safe-area-inset-bottom));gap:16px}.opening-footer>span{font-size:12px;letter-spacing:.02em}.opening-footer>span:last-child{text-align:right;max-width:215px;font-size:12px;line-height:1.5}
  .saylo-brand{font-size:22px}.saylo-brand small{font-size:12px;letter-spacing:.15em}
}
@media(max-width:380px){
  .opening{padding:210px 19px 12px}.opening-topbar{padding:0 16px}.opening-artwork{height:402px}.opening-logo-block{margin-bottom:21px}.opening-overline{font-size:13px}.opening-mode{padding:13px 16px;min-height:95px}.mode-copy>b{font-size:21px}.mode-upcoming .mode-copy>b{font-size:18px}.mode-status{padding:5px 6px}.mode-arrow{width:34px;height:34px}.mode-copy>span{font-size:12px}.opening-footer{margin:0 19px}.opening-footer>span:last-child{max-width:170px}.opening-utilities{gap:25px}.opening-utilities .text-button{font-size:13px}
}
@media(max-height:730px) and (min-width:601px){
  .opening{min-height:545px}.opening-topbar{height:65px}.opening-content{padding-top:4px;padding-bottom:10px}.opening-overline{font-size:15px;margin-bottom:4px}.opening-logo>span{font-size:6rem}.opening-logo>strong{font-size:7.9rem}.opening-logo-block{margin-bottom:22px}.opening-mode{min-height:91px;padding-top:12px;padding-bottom:12px}.mode-copy>b{font-size:21px}.mode-upcoming .mode-copy>b{font-size:19px}.opening-utilities{padding-top:10px}
}

/* The native Haru bust needs no magnification; keep antenna tips inside the opening panel. */
.opening-crop.haru-native-art{top:0}

/* Yui's face sits at about 44% of the source width; center it without exposing an edge. */
.portrait.yui-centered-art>img{transform:scale(1.14);transform-origin:left top}
.opening-crop.yui-centered-art img{transform:translateX(-44%)}

/* Playing-style labels share one palette across all characters and screens. */
[data-play-style="attack"]{--play-style-color:#ed9a91}
[data-play-style="defense"]{--play-style-color:#8bc9e8}
[data-play-style="balanced"]{--play-style-color:var(--gold)}
.rival-option small[data-play-style],.player-identity small[data-play-style]{color:var(--play-style-color)}