* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #070707; color: #f5f5f5;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; touch-action: none; }
canvas { display: block; }

/* HUD */
#hud { position: fixed; top: 0; left: 0; right: 0; padding: max(8px, env(safe-area-inset-top)) 56px 6px 12px;
    display: none; pointer-events: none; z-index: 5; }
#hudrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#score { display: flex; flex-wrap: wrap; gap: 4px; max-width: 75%; }
#score .pchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
    font-size: 11.5px; font-weight: 700; border-radius: 9px; background: rgba(20,26,34,.66);
    border-left: 3px solid #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; }
#score .pchip.dead { opacity: .5; }
#timer { font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#prog { position: relative; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
#prog .dot { position: absolute; top: -4px; width: 14px; height: 14px; border-radius: 50%;
    transform: translateX(-50%); transition: left .15s linear; border: 1px solid rgba(0,0,0,.4); }
#objective { width: fit-content; max-width: 88vw; margin: 7px auto 0; padding: 5px 11px;
    border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(20,26,34,.76);
    color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .035em; text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.65); transition: color .15s, background .15s; }
#objective.carrying { color: #1b2810; background: rgba(255,210,74,.94); border-color: #ffe58d; text-shadow: none; }
#objective.dead { color: rgba(255,255,255,.72); background: rgba(105,33,38,.82); }

/* Center banner (countdown / results / notices) */
#banner { position: fixed; top: 34%; left: 0; right: 0; text-align: center; z-index: 6;
    pointer-events: none; font-weight: 800; font-size: 44px;
    text-shadow: 0 2px 10px rgba(0,0,0,.8); display: none; }
#banner small { display: block; font-size: 15px; font-weight: 600; opacity: .9; margin-top: 6px; }

/* Join screen */
#join { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 20%, rgba(255,79,0,.13), transparent 38%), #070707; overflow-y: auto; touch-action: pan-y; }
#join .card { width: min(340px, 88vw); margin: auto; text-align: center; padding: 24px 0; }
#join h1 { font-size: 40px; letter-spacing: 2px; }
#join .tag { opacity: .8; margin: 8px 0 22px; font-size: 14px; }
#join .card > button { display: block; width: 100%; margin: 14px 0 10px; padding: 14px; font-size: 17px; font-weight: 700;
    color: #fff; background: #ff4f00; border: 0; border-radius: 12px; cursor: pointer; }
#join .card > button:disabled { opacity: .5; }

.optlabel { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    opacity: .65; margin: 2px 0 6px; text-align: left; }

/* Rival seats (tappable slot grid, the PvP lobby's host model) */
.slotgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.slotcell { display: flex; align-items: center; gap: 6px; padding: 9px 8px; font-size: 12.5px;
    font-weight: 600; color: #eef2f7; text-align: left; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14); border-radius: 10px; font-family: inherit; }
.slotcell .n { opacity: .55; font-size: 11px; }
.slotcell .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slotcell .you { color: #ffd24a; font-size: 10px; font-weight: 800; }
.slotcell.bot { border-style: dashed; }
.slotcell.none { border-style: dashed; opacity: .45; }
.slotcell.tappable { cursor: pointer; }
.slotcell.tappable:active { background: rgba(255,210,74,.2); }
.slotcell .kind { font-size: 11px; padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,.12); }
.slotcell .kind.easy { background: rgba(110,200,110,.25); }
.slotcell .kind.medium { background: rgba(255,210,74,.25); }
.slotcell .kind.hard { background: rgba(230,90,90,.3); }

/* Character select (shared by the join screen and the pause menu) */
#pick { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    opacity: .65; margin-bottom: 8px; text-align: left; }
.chargrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.chartile { padding: 6px 2px 7px; background: rgba(255,255,255,.07); border: 2px solid transparent;
    border-radius: 12px; cursor: pointer; color: #eef2f7; font-family: inherit; }
.chartile .face { height: 44px; display: flex; align-items: center; justify-content: center;
    font-size: 26px; border-radius: 8px; margin: 0 6px 5px; }
.chartile .face img { max-width: 100%; max-height: 100%; }
.chartile .nm { font-size: 10px; font-weight: 600; opacity: .85; line-height: 1.15; }
.chartile.sel { border-color: #ff4f00; background: rgba(255,79,0,.14); }
#howto { margin-top: 18px; font-size: 12.5px; line-height: 1.65; opacity: .7; text-align: left; }

/* In-game pause button */
#btn-pause { position: fixed; top: max(6px, env(safe-area-inset-top)); right: 10px; z-index: 7;
    display: none; width: 38px; height: 38px; font-size: 16px; color: #eef2f7;
    background: rgba(20,26,34,.72); border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
    cursor: pointer; line-height: 1; }

/* Pause menu */
#pausemenu { position: fixed; inset: 0; z-index: 20; display: none; align-items: center;
    justify-content: center; background: rgba(10,14,20,.78); overflow-y: auto; touch-action: pan-y; }
#pausemenu .pcard { width: min(340px, 88vw); margin: auto; padding: 20px 18px; text-align: center;
    background: #171717; border: 1px solid #303033; border-radius: 16px; }
#pausemenu h2 { font-size: 22px; letter-spacing: 1px; }
#pausemenu .note { min-height: 16px; margin: 6px 0 4px; font-size: 12px; opacity: .75; }
#pausemenu .plabel { margin: 10px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; opacity: .65; text-align: left; }
#pausemenu .prow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
#pausemenu .prow button, #pausemenu > .pcard > button { width: 100%; padding: 12px; font-size: 15px;
    font-weight: 700; border: 0; border-radius: 12px; cursor: pointer; color: #eef2f7;
    background: rgba(255,255,255,.12); }
#pausemenu #pm-resume { background: #ff4f00; color: #fff; margin-bottom: 8px; }
#pausemenu #pm-leave { background: rgba(200,60,60,.35); }

/* On-screen d-pad (Buttons control mode) */
#dpad { position: fixed; right: 12px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 8;
    display: none; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 4px; }
#dpad button { border: 1px solid rgba(255,255,255,.22); border-radius: 14px; font-size: 20px;
    color: #eef2f7; background: rgba(20,26,34,.6); cursor: pointer; touch-action: none;
    -webkit-user-select: none; user-select: none; }
#dpad button:active { background: rgba(255,210,74,.5); }
#dpad .du { grid-area: 1 / 2; } #dpad .dl { grid-area: 2 / 1; }
#dpad .dr { grid-area: 2 / 3; } #dpad .dd { grid-area: 3 / 2; }

/* Post-match actions */
#acts { position: fixed; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 6;
    display: none; text-align: center; }
#acts button { padding: 12px 26px; margin: 0 6px; font-size: 16px; font-weight: 700; color: #10141c;
    background: #ff4f00; border: 0; border-radius: 12px; cursor: pointer; }
#acts button.sec { background: rgba(255,255,255,.2); color: #eef2f7; }