@import '_content/GameCTZ.GoStop2.Client/GameCTZ.GoStop2.Client.301804zjdu.bundle.scp.css';

/* /Components/GameScreen.razor.rz.scp.css */
.game-demo[b-t634eu2hby] {
    display: grid;
    gap: .8rem;
    width: min(100%, 1180px);
    margin-inline: auto;
    -webkit-user-select: none;
    user-select: none;
}

.legacy-chat-input[b-t634eu2hby],
.legacy-room-name[b-t634eu2hby],
.legacy-chat-target[b-t634eu2hby] {
    -webkit-user-select: text;
    user-select: text;
}

.demo-toolbar[b-t634eu2hby],
.demo-status[b-t634eu2hby] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.progress-track[b-t634eu2hby],
.toolbar-actions[b-t634eu2hby],
.demo-status[b-t634eu2hby] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.deck-picker[b-t634eu2hby] {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #a9c4ca;
    font-size: .78rem;
    font-weight: 750;
}

.deck-picker select[b-t634eu2hby] {
    min-width: 12rem;
    padding: .55rem .65rem;
    border: 1px solid #42636c;
    border-radius: .38rem;
    color: #e7f4f5;
    background: #17343c;
}

.deck-picker select:disabled[b-t634eu2hby] { opacity: .5; }

.progress-track span[b-t634eu2hby] {
    padding: .4rem .65rem;
    border: 1px solid #294854;
    border-radius: 999px;
    color: #7fa3ad;
    font-size: .78rem;
}

.progress-track span.active[b-t634eu2hby] {
    border-color: #ffd85e;
    color: #ffeaa2;
    background: #4f4014;
}

button[b-t634eu2hby] {
    border: 0;
    border-radius: .38rem;
    padding: .65rem 1rem;
    color: #05242a;
    background: #68d6db;
    font-weight: 800;
}

button.secondary[b-t634eu2hby] {
    color: #d8edf0;
    background: #263f47;
}

button.tester[b-t634eu2hby] {
    color: #241900;
    background: #ffd85e;
}

button:disabled[b-t634eu2hby] {
    opacity: .45;
}

.legacy-screen[b-t634eu2hby] {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 48 / 37;
    border: 1px solid #526a70;
    background: #031719;
    box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 35%);
    isolation: isolate;
}

.game-demo.immersive[b-t634eu2hby] {
    place-items: center;
    gap: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
}

.game-demo.immersive .legacy-screen[b-t634eu2hby] {
    width: min(100vw, 129.72972973vh);
    height: min(100vh, 77.08333333vw);
    border: 0;
    box-shadow: none;
}

@supports (height: 100dvh) {
    .game-demo.immersive .legacy-screen[b-t634eu2hby] {
        width: min(100vw, 129.72972973dvh);
        height: min(100dvh, 77.08333333vw);
    }
}

.legacy-screen[b-t634eu2hby]  .legacy-lab,
.legacy-screen[b-t634eu2hby]  .viewport-shell {
    width: 100%;
    height: 100%;
}

.screen-background[b-t634eu2hby] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
}

.loading-screen[b-t634eu2hby] {
    display: grid;
    place-content: center;
    gap: 1rem;
    position: absolute;
    inset: 0;
    z-index: 10;
    color: white;
    background: radial-gradient(circle, #126d75, #042d32 65%, #011518);
    text-align: center;
}

.error-screen[b-t634eu2hby] { background: #4b1515; }

.initial-loading[b-t634eu2hby] {
    display: block;
    z-index: 21;
}

.session-ended[b-t634eu2hby] {
    display: block;
    z-index: 21;
}

.session-ended-actions[b-t634eu2hby] {
    position: absolute;
    top: 75%;
    left: 0;
    right: 0;
}

.common-hit[b-t634eu2hby] { z-index: 6; }

.legacy-screen.dialog-blocking[b-t634eu2hby]  .legacy-lab {
    pointer-events: none;
}

.dialog-hit[b-t634eu2hby] { z-index: 9; }

.legacy-chat-input[b-t634eu2hby] {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    margin: 0;
    padding: 0 .208333cqw;
    border: 0;
    border-radius: 0;
    outline: 0;
    font: 1.145833cqw/1.5625cqw var(--gamectz-ui-font);
}

.legacy-chat-input[b-t634eu2hby]::placeholder { color: inherit; }

.legacy-text-history[b-t634eu2hby] {
    position: absolute;
    z-index: 5;
    touch-action: none;
    user-select: none;
}

.error-screen span[b-t634eu2hby] {
    max-width: 42rem;
    color: #ffd7d7;
    font: .85rem ui-monospace, SFMono-Regular, Menlo, monospace;
}

.error-actions[b-t634eu2hby] {
    display: flex;
    justify-content: center;
    gap: .6rem;
}

.server-table[b-t634eu2hby] {
    display: grid;
    position: absolute;
    left: 58.3%;
    top: 36.4%;
    width: 34.2%;
}

.server-row[b-t634eu2hby] {
    display: grid;
    grid-template-columns: 1fr .6fr .8fr;
    gap: .35rem;
    min-height: 2.45rem;
    padding: .55rem .65rem;
    border-radius: 0;
    border-bottom: 1px solid #c3d7d4;
    color: #21484e;
    background: rgb(249 251 246 / 92%);
    font-size: clamp(.6rem, 1.35vw, .92rem);
    text-align: left;
}

.server-row:hover[b-t634eu2hby] { background: #fff4b7; }

.screen-guide[b-t634eu2hby] {
    position: absolute;
    left: 61%;
    top: 76%;
    color: #e9ffff;
    font-weight: 800;
}

.room-table[b-t634eu2hby] {
    display: grid;
    position: absolute;
    left: 5.75%;
    top: 16.3%;
    width: 55.5%;
}

.room-row[b-t634eu2hby] {
    display: grid;
    grid-template-columns: 3rem 1.7fr 1.25fr 3.6rem;
    gap: .4rem;
    min-height: 2.2rem;
    padding: .5rem .65rem;
    border-radius: 0;
    border-bottom: 1px solid #b5cccf;
    color: #183c43;
    background: rgb(239 248 246 / 94%);
    font-size: clamp(.58rem, 1.25vw, .88rem);
    text-align: left;
}

.room-row:hover:not(:disabled)[b-t634eu2hby] { background: #fff1ae; }

.lobby-actions[b-t634eu2hby] {
    position: absolute;
    left: 62.5%;
    top: 24.5%;
}

.modal-shade[b-t634eu2hby] {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 10;
    inset: 0;
    padding: 1rem;
    background: rgb(0 18 22 / 58%);
    backdrop-filter: blur(1.5px);
}

.legacy-dialog[b-t634eu2hby],
.room-ready-card[b-t634eu2hby] {
    width: min(88%, 420px);
    padding: 1.4rem;
    border: 3px double #d9b76a;
    border-radius: .65rem;
    color: #2c2417;
    background: linear-gradient(#fff9dc, #e8d6a4);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 55%);
    text-align: center;
}

.legacy-dialog h2[b-t634eu2hby],
.room-ready-card h2[b-t634eu2hby] { margin: .2rem 0 .8rem; }

.server-items-dialog[b-t634eu2hby] { max-height: 90%; overflow-y: auto; }
.server-item-list[b-t634eu2hby] { padding: 0; list-style: none; text-align: left; }
.server-item-list li[b-t634eu2hby] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid #c8b889; }
.server-item-list small[b-t634eu2hby] { display: block; margin-top: .2rem; }
.server-item-list span[b-t634eu2hby] { max-width: 9rem; font-size: .85rem; }

.dialog-kicker[b-t634eu2hby],
.room-number[b-t634eu2hby] {
    margin: 0;
    color: #796027;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.create-room-dialog label[b-t634eu2hby] {
    display: grid;
    gap: .4rem;
    text-align: left;
}

.create-room-dialog input[b-t634eu2hby] {
    padding: .65rem;
    border: 1px solid #9f8958;
    border-radius: .25rem;
}

.room-options[b-t634eu2hby],
.result-dialog dl[b-t634eu2hby] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    margin: 1rem 0;
}

.room-options div[b-t634eu2hby],
.result-dialog dl div[b-t634eu2hby],
.score-preview span[b-t634eu2hby] {
    display: flex;
    justify-content: space-between;
    padding: .45rem .6rem;
    background: rgb(255 255 255 / 48%);
}

.room-options dt[b-t634eu2hby],
.room-options dd[b-t634eu2hby],
.result-dialog dt[b-t634eu2hby],
.result-dialog dd[b-t634eu2hby] { margin: 0; }

.dialog-actions[b-t634eu2hby],
.card-choices[b-t634eu2hby],
.versus[b-t634eu2hby],
.score-preview[b-t634eu2hby] {
    display: flex;
    justify-content: center;
    gap: .75rem;
}

.card-choices button[b-t634eu2hby] {
    display: grid;
    justify-items: center;
    gap: .4rem;
    color: #2b2318;
    background: #f8e8b9;
}

.card-face[b-t634eu2hby] {
    display: block;
    width: 43px;
    height: 63px;
    background-image: var(--gamectz-card-sprite);
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.go-button[b-t634eu2hby] { color: white; background: #208946; }
.stop-button[b-t634eu2hby] { color: white; background: #bd3f35; }

.room-ready-card[b-t634eu2hby] {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.versus[b-t634eu2hby] {
    align-items: center;
    margin: 1rem 0;
    font-size: 1.05rem;
}

.versus span[b-t634eu2hby] { color: #bc3d2d; font-size: 1.4rem; font-weight: 900; }

.card-hit-target[b-t634eu2hby] {
    position: absolute;
    z-index: 4;
    padding: 0;
    border-radius: 0;
    color: transparent;
    background: transparent;
}

@keyframes legacy-hand-slot-move-b-t634eu2hby {
    from { transform: translate(var(--legacy-hand-from-x), var(--legacy-hand-from-y)); }
    to { transform: translate(0, 0); }
}

.card-hit-target[data-hand-moving="true"][b-t634eu2hby] {
    animation: legacy-hand-slot-move-b-t634eu2hby 200ms linear both;
}

.card-hit-target:not(:disabled):hover[b-t634eu2hby],
.card-hit-target:not(:disabled):focus-visible[b-t634eu2hby] {
    outline: 3px solid #ffe051;
    outline-offset: 2px;
    transform: translateY(-8%);
}

.result-score[b-t634eu2hby] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .3rem;
    color: #bb3128;
}

.result-score strong[b-t634eu2hby] { font-size: 4rem; line-height: 1; }

.demo-status[b-t634eu2hby] {
    justify-content: flex-start;
    padding: .65rem .85rem;
    border: 1px solid #29464f;
    border-radius: .45rem;
    color: #b7d1d7;
    background: #0a1d22;
    font-size: .82rem;
}

.demo-status strong[b-t634eu2hby] { color: #ffe185; margin-right: auto; }

.timeline[b-t634eu2hby] {
    padding: .75rem 1rem;
    border: 1px solid #29464f;
    border-radius: .45rem;
    color: #b8cbd4;
    background: #09181d;
}

.verification-report[b-t634eu2hby] {
    padding: .75rem 1rem;
    border: 1px solid #35565f;
    border-radius: .45rem;
    color: #c3d8dc;
    background: #0a1d22;
}

.verification-report summary[b-t634eu2hby] { font-weight: 850; }

.verification-report ol[b-t634eu2hby] {
    display: grid;
    gap: .35rem;
    max-height: 22rem;
    margin: .75rem 0 0;
    padding-left: 1.5rem;
    overflow: auto;
}

.verification-report li[b-t634eu2hby] {
    display: grid;
    grid-template-columns: 3.4rem minmax(12rem, 1fr) minmax(10rem, 1fr);
    gap: .6rem;
    align-items: baseline;
    padding: .35rem .5rem;
    border-left: 3px solid #64747a;
    background: rgb(255 255 255 / 3%);
}

.verification-report li.pass[b-t634eu2hby] { border-color: #45c986; }
.verification-report li.fail[b-t634eu2hby] { border-color: #ef6464; }
.verification-report li.pass strong[b-t634eu2hby] { color: #65e6a1; }
.verification-report li.fail strong[b-t634eu2hby] { color: #ff8585; }
.verification-report small[b-t634eu2hby] { color: #8eabb2; }

.timeline summary[b-t634eu2hby] { font-weight: 800; }

.timeline ol[b-t634eu2hby] {
    max-height: 18rem;
    margin-bottom: 0;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .76rem;
}

@media (max-width: 700px) {
    .legacy-dialog[b-t634eu2hby],
    .room-ready-card[b-t634eu2hby] { transform-origin: center; }
    .server-row[b-t634eu2hby],
    .room-row[b-t634eu2hby] { padding: .25rem; }
    .verification-report li[b-t634eu2hby] { grid-template-columns: 3.4rem 1fr; }
    .verification-report small[b-t634eu2hby] { grid-column: 2; }
}

/* 레거시 표면은 Skia가 전부 그리며 Razor는 의미/키보드 입력 영역만 제공합니다. */
.legacy-hit[b-t634eu2hby] {
    position: absolute;
    z-index: 6;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
}

/* Keep modal hit targets above the pointer blocker; this rule must follow .legacy-hit. */
.legacy-hit.dialog-hit[b-t634eu2hby] { z-index: 9; }

.legacy-dialog-description[b-t634eu2hby] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.legacy-hit:focus-visible[b-t634eu2hby] {
    outline: 2px solid #fff36a;
    outline-offset: -2px;
}

.legacy-hit:disabled[b-t634eu2hby] {
    background: transparent;
    opacity: 1;
}

.legacy-room-name[b-t634eu2hby],
.legacy-chat-target[b-t634eu2hby] {
    position: absolute;
    z-index: 9;
    box-sizing: border-box;
    padding: 0 .208333cqw;
    border: 0;
    border-radius: 0;
    color: #111;
    background: transparent;
    font: 1.145833cqw/1.145833cqw 'GameCTZ Pretendard', Pretendard, sans-serif;
    letter-spacing: -.02em;
}

.legacy-chat-target[b-t634eu2hby] { color: black; }

/* The canvas artwork supplies the input borders. The chat input gets an opaque
   theme background while editing so typed text covers the artwork's hint. */
.legacy-screen input:is(.legacy-chat-input, .legacy-room-name, .legacy-chat-target)[b-t634eu2hby],
.legacy-screen input:is(.legacy-chat-input, .legacy-room-name, .legacy-chat-target):focus[b-t634eu2hby] {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

.legacy-screen input:is(.legacy-room-name, .legacy-chat-target)[b-t634eu2hby],
.legacy-screen input:is(.legacy-room-name, .legacy-chat-target):focus[b-t634eu2hby] {
    background: transparent;
}

.legacy-room-name[aria-invalid="true"][b-t634eu2hby] {
    color: #9d1111;
}

.card-hit-target:not(:disabled):hover[b-t634eu2hby] {
    outline: 0;
    transform: none;
}
/* /Layout/ImmersiveLayout.razor.rz.scp.css */
.immersive-layout[b-443svn40uy] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #000;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-lvj8e5xjh9] {
    min-height: 100vh;
}
/* /Pages/Home.razor.rz.scp.css */
.verification-shell[b-x0cbtkx2qz] {
    display: grid;
    gap: 1.25rem;
    margin: 0 auto;
    max-width: 1100px;
    padding: 1.5rem;
}

.eyebrow[b-x0cbtkx2qz] {
    color: #76d6ff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.verification-panel[b-x0cbtkx2qz] {
    background: #0d171d;
    border: 1px solid #284454;
    border-radius: .75rem;
    padding: 1rem;
}

.verification-panel summary[b-x0cbtkx2qz] {
    font-weight: 700;
}

.bridge-status[b-x0cbtkx2qz] {
    align-items: center;
    border-bottom: 1px solid #284454;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 1rem;
}

button[b-x0cbtkx2qz] {
    background: #00a5e5;
    border: 0;
    border-radius: .35rem;
    color: #00141e;
    font-weight: 700;
    padding: .65rem 1rem;
}

button.secondary[b-x0cbtkx2qz] {
    background: #253640;
    color: #dceaf1;
}

button:disabled[b-x0cbtkx2qz] {
    opacity: .55;
}