:root{color-scheme:dark;--bg:#071727;--panel:#102a40;--line:#2e4c61;--gold:#ffd179;--teal:#66dde1;--red:#ff8179;--safe:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f8f2e6;font:15px/1.5 "Malgun Gothic","Apple SD Gothic Neo",sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:10px;color:inherit;background:#142e44;padding:10px 15px;touch-action:manipulation}button:hover:not(:disabled){filter:brightness(1.18)}button:disabled{cursor:default;opacity:.4}button.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#3e3b2b}.gold{background:linear-gradient(130deg,#ffe19a,#e9a93b);color:#1c2633;border-color:#ffe4a4;font-weight:900;box-shadow:0 4px 20px #c48a3025}.teal{background:linear-gradient(120deg,#1b899b,#155061);border-color:#55c4cd;font-weight:800}input,select{border:1px solid var(--line);background:#091d2e;color:#f6f0e8;border-radius:8px;padding:10px;max-width:100%}small{color:#b7c7d1;font-size:12px}h1,h2,p{margin-top:0}h1{font-size:clamp(40px,6vw,90px);line-height:1.15;letter-spacing:-.05em;margin-bottom:16px}em{font-style:normal;color:var(--gold);font-size:.5em}h2{font-size:24px}p{color:#c4ced5}.face{display:inline-block;width:64px;height:64px;flex-shrink:0;background-image:url('assets/heads.webp');background-size:400% 300%;background-repeat:no-repeat;vertical-align:middle}.glass{background:linear-gradient(130deg,#102c43f5,#0b1c2df2);border:1px solid #55718388;border-radius:20px;padding:28px;box-shadow:0 15px 60px #0005}.boot{display:grid;place-content:center;height:100dvh;text-align:center}.boot img{max-width:180px;margin:auto}.entry,.lobby{min-height:100dvh;background:linear-gradient(110deg,#071b2bdd,#07172677),url('assets/chamber.webp') center/cover fixed}.entry{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:5vw;padding:8vh 7vw}.hero-copy>small{letter-spacing:.2em;color:var(--teal)}.hero-copy h2{color:var(--gold)}.entry form{display:grid;gap:16px;max-width:480px}.entry form p{margin:0}.entry form button{min-height:52px}.fine{display:block;color:#94a8b6;font-size:11px;margin-top:12px}.entry-faces{display:flex;align-items:center}.entry-faces .face{width:130px;height:130px}.entry-faces .face:nth-child(2){width:155px;height:155px}.lobby{padding:20px 4vw 25px}.lobby header{display:flex;justify-content:space-between;align-items:center;gap:12px}.lobby header>div{display:flex;align-items:center;gap:8px}.lobby header b{font-size:23px;color:var(--gold)}#account{font-size:13px}.lobby-main{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:4vw;min-height:calc(100dvh - 140px)}.lineup-art{display:flex;align-items:end;filter:drop-shadow(0 12px 18px #0009)}.lineup-art .face{width:clamp(70px,9vw,140px);height:clamp(70px,9vw,140px);margin-right:-18px}.lineup-art .face:nth-child(3){width:clamp(100px,11vw,170px);height:clamp(100px,11vw,170px)}.feature-row{display:flex;gap:12px;margin-top:25px}.feature-row span{border:1px solid #8aa8b050;border-radius:8px;padding:9px 15px;color:#cbd7da;background:#0a243ae6}.section-title{display:flex;flex-direction:column;margin-bottom:16px}.section-title b{font-size:24px}.factions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.factions button{font-weight:900;font-size:20px}.factions button:first-child{color:var(--teal)}.factions button:last-child{color:var(--red)}.selection-count{font-size:12px;color:#bdcbd5;margin:12px 0}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.roster button{padding:6px 2px;display:flex;flex-direction:column;align-items:center}.roster small{font-size:10px}.roster .face{width:62px;height:62px}.difficulty{display:flex;align-items:center;justify-content:space-between;margin:14px 0}.difficulty select{width:65%;padding:6px}.match-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.match-buttons button{min-height:48px}.lobby footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.lobby footer>span{font-size:11px;color:#b4c7d2}.queue{display:flex;gap:8px;align-items:center;margin-top:14px;color:var(--gold);font-size:13px}.spinner{display:inline-block;width:14px;height:14px;border:2px solid #d4af6355;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.battle{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) var(--safe) env(safe-area-inset-left,0px)}.battle-head{display:grid;grid-template-columns:1fr 150px 1fr;gap:16px;align-items:center;padding:9px 22px;flex-shrink:0;background:#0d253b}.team{display:flex;align-items:center;justify-content:space-between;gap:12px}.team b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team span{font-size:clamp(20px,3vw,36px);font-weight:900}.own{color:var(--teal)}.enemy{color:var(--red)}.round{display:grid;grid-template-columns:1fr 40px;line-height:1.2;text-align:center}.round b{font-size:30px;color:var(--gold);grid-row:span 2}.round small{font-size:10px}.round span{font-size:12px;color:#ced6dd}.poll{height:5px;background:var(--red);flex-shrink:0}.poll i{height:100%;display:block;background:var(--teal);transition:width .4s ease}.stage-wrap{position:relative;min-height:0;flex:1;isolation:isolate;overflow:hidden;background:#1b2b37}.stage-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.case-label{position:absolute;top:9px;left:12px;background:#071b31bb;padding:5px 10px;border:1px solid #b7c9d044;border-radius:6px;font-size:12px;pointer-events:none}.stage-tools{position:absolute;right:10px;top:9px}.stage-tools button{font-size:20px;padding:3px 10px;background:#061829cc}.impact-notice{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);max-width:92%;font-size:13px;padding:6px 14px;background:#0a1c30dc;color:var(--gold);border-radius:6px;text-align:center;pointer-events:none}.impact-notice:empty{display:none}.command{background:linear-gradient(120deg,#142f47,#091b2e);flex-shrink:0;border-top:1px solid #cdaf6b88;padding:8px 14px 6px}.speaker-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}#speakers{display:flex;gap:6px}#speakers button{padding:2px 7px;display:flex;align-items:center;font-size:12px;border-radius:6px}#speakers .face{width:32px;height:32px}.resources{display:flex;gap:12px;font-weight:800;color:var(--gold);font-size:13px}.speaker-row>button{padding:3px 10px}.action-row{display:flex;gap:10px;align-items:stretch}#hand{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1;min-width:0}.attack-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border-radius:8px;border:1px solid #3a7890;background:linear-gradient(135deg,#154157,#0e253a);padding:10px 12px;min-width:0}.attack-card small{font-size:11px;color:#87d6dc}.attack-card b{font-size:16px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.attack-card span{font-size:11px;color:#c4d5df}.attack-card.foul{border-color:#a25455;background:linear-gradient(135deg,#583039,#2a202f)}.attack-card.foul small{color:#ffb6a8}#fire{min-width:140px;font-size:19px}.rest{font-size:12px;padding:6px 10px}.target-row{display:flex;align-items:center;gap:14px;margin-top:6px;font-size:12px}.target-row select{padding:3px 7px;font-size:12px}#target{max-width:180px}#hint{flex:1;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}#vs{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(120deg,#071d32ef,#381e2aea);z-index:5;text-align:center;padding:20px}#vs[hidden]{display:none}#vs b{font-size:clamp(22px,4vw,60px);margin:15px}#vs p{font-size:13px}.result{min-height:100dvh;background:linear-gradient(#071828bb,#071828ee),url('assets/chamber.webp') center/cover;display:flex;align-items:center;flex-direction:column;text-align:center;padding:35px 20px}.result>h1{font-size:56px;color:var(--gold);margin-top:15px}.final-poll{display:flex;align-items:center;gap:30px}.final-poll strong{font-size:clamp(40px,7vw,90px);color:var(--teal)}.final-poll strong:last-child{color:var(--red)}.final-poll span{color:var(--gold);font-size:18px}.result-body{display:flex;gap:50px;align-items:center;margin:20px}.mvp .face{display:block;width:170px;height:170px}.mvp h2{margin:0}.reward h2{color:var(--gold)}.result-actions{display:flex;gap:14px}.result-actions button{min-width:180px}dialog{position:fixed;inset:5vh auto auto 50%;transform:translateX(-50%);width:min(950px,94vw);max-height:90dvh;background:#0c2135;color:#f5f1e8;border:1px solid #6f8995;border-radius:16px;padding:0;z-index:25;box-shadow:0 0 0 100vmax #000b;overflow:auto}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:20px;margin:0}.modal-body{padding:20px}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.catalog-grid .attack-card b{white-space:normal;font-size:14px}.catalog-grid p{font-size:12px;margin-bottom:0}.pager{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:20px}#search-form{display:flex;gap:10px;margin-bottom:16px}table{border-collapse:collapse;width:100%}td,th{text-align:left;padding:10px;border-bottom:1px solid var(--line)}#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:50;background:#183a53;border:1px solid #7cadbd;border-radius:10px;padding:12px 20px;max-width:90vw;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}body[data-connection]::after{content:'연결 복구 중…';position:fixed;right:14px;top:10px;color:#ffd179;background:#102b44;padding:5px 12px;z-index:60;font-size:12px}
@media(max-width:900px){.lobby{padding:12px 3vw}.lobby-main{gap:20px}.lobby header b{font-size:17px}.lobby header button{font-size:11px;padding:6px 9px}.glass{padding:18px}.hero-copy h1{font-size:46px}.hero-copy h2{font-size:20px}.roster .face{width:46px;height:46px}.roster button b{font-size:12px}.roster small{font-size:9px}.feature-row{gap:6px}.feature-row span{padding:5px 9px;font-size:12px}.entry{padding:5vw;gap:20px}.entry-faces .face{width:85px;height:85px}.entry-faces .face:nth-child(2){width:110px;height:110px}}
@media(max-height:550px) and (orientation:landscape){.battle-head{padding:4px 12px;grid-template-columns:1fr 120px 1fr;gap:10px}.team b{font-size:11px}.team span{font-size:23px}.round b{font-size:25px}.round span{font-size:10px}.round small{font-size:9px}.command{padding:4px 8px}.speaker-row{margin-bottom:3px;gap:6px}#speakers{gap:3px}#speakers button{padding:0 3px;font-size:10px}#speakers .face{width:24px;height:24px}.resources{font-size:11px;gap:8px}.speaker-row>button{padding:0 7px}.action-row{gap:5px}#hand{gap:5px}.attack-card{padding:4px 6px}.attack-card b{font-size:12px;margin:0}.attack-card small,.attack-card span{font-size:9px}#fire{font-size:14px;min-width:90px;padding:6px 10px}.rest{font-size:9px;padding:3px 7px}.target-row{margin-top:3px;gap:8px;font-size:10px}.target-row select{padding:1px 4px;font-size:10px}#hint{font-size:9px}.impact-notice{font-size:10px;padding:3px 8px}.case-label{font-size:10px;top:5px;left:8px}.stage-tools{top:5px}.stage-tools button{font-size:16px}.lobby-main{padding:15px 0;min-height:0}.lobby-main .hero-copy p{font-size:12px}.lineup-art .face{width:70px;height:70px}.lineup-art .face:nth-child(3){width:90px;height:90px}.setup .section-title{margin-bottom:6px}.section-title b{font-size:18px}.factions button{padding:3px;font-size:16px}.selection-count{margin:6px 0}.roster .face{width:38px;height:38px}.roster button{padding:1px}.roster small{display:none}.difficulty{margin:6px 0;font-size:11px}.difficulty select{padding:1px}.match-buttons button{min-height:32px;font-size:12px;padding:5px}.lobby footer{font-size:10px;gap:5px}.lobby footer button{font-size:11px;padding:5px 8px}.result{padding:10px 20px}.result>h1{font-size:35px;margin:5px}.final-poll strong{font-size:45px}.result-body{margin:5px;gap:30px}.mvp .face{width:85px;height:85px}.mvp p,.reward p{font-size:11px}.mvp h2,.reward h2{font-size:20px;margin:0}.reward{padding:10px 20px}.result-actions button{padding:6px 12px}.result>p{margin:0}}
@media(orientation:portrait) and (max-width:650px){.entry{grid-template-columns:1fr;padding:30px 20px}.entry .hero-copy h1{font-size:40px}.entry-faces{display:none}.lobby-main{grid-template-columns:1fr;padding:22px 0}.lobby header{align-items:flex-start}.lobby header>div{flex-wrap:wrap;justify-content:flex-end}.lineup-art{display:none}.hero-copy h1{font-size:42px}.lobby-main .hero-copy p{margin-bottom:0}.feature-row{display:none}.battle-head{padding:6px 8px;grid-template-columns:1fr 100px 1fr;gap:6px}.team{flex-direction:column;gap:0}.enemy{flex-direction:column-reverse}.team b{font-size:10px}.team span{font-size:24px}.command{padding:6px}.resources{font-size:10px;gap:5px}#speakers button{padding:2px;flex-direction:column;font-size:9px}#speakers .face{width:25px;height:25px}#speakers{gap:3px}.action-row{flex-wrap:wrap;gap:5px}#hand{flex-basis:100%;gap:4px}.attack-card{padding:5px}.attack-card small,.attack-card span{font-size:8px}.attack-card b{font-size:11px}#fire{flex:1;font-size:15px;padding:8px}.rest{font-size:10px;padding:4px 15px}.target-row{flex-wrap:wrap;gap:5px}.target-row label{font-size:10px}.target-row select{font-size:10px;padding:3px}#hint{flex-basis:100%;font-size:10px}.catalog-grid{grid-template-columns:1fr 1fr}.result-body{gap:15px}.mvp .face{width:100px;height:100px}.reward{padding:15px}.result>h1{font-size:40px}.result-actions button{min-width:0}.final-poll{gap:15px}.final-poll strong{font-size:48px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.clip-stage{height:min(55dvh,420px);position:relative;background:#142536;overflow:hidden;border:1px solid #4a6470;border-radius:10px}.clip-stage canvas{display:block;width:100%;height:100%}
.motion-pager{gap:8px;flex-wrap:wrap}.motion-pager button{font-size:12px;padding:8px 10px}
@media(max-height:350px) and (orientation:landscape){.command .attack-card span{display:none}.command .attack-card{padding:3px 5px}.command .attack-card b{font-size:11px}.command #speakers .face{width:20px;height:20px}.command .target-row select{padding:0 4px}.clip-stage{height:54dvh}.modal-body{padding:10px}.modal-head{padding:8px 12px}}
@media(max-height:550px) and (orientation:landscape){dialog .modal-head{padding:6px 12px}dialog .modal-head h2{font-size:16px}dialog .modal-body{padding:8px 12px}dialog .fine{font-size:9px;margin:0 0 6px}dialog .clip-stage{height:calc(90dvh - 140px)}dialog .pager{margin-top:8px;gap:8px}dialog .pager button{font-size:11px;padding:4px 8px}}