/* ============ Grand Line — ôn thi Lập trình mạng ============ */
:root{
  --sea:#0A1220;          /* nền biển sâu */
  --deck:#111C2E;         /* mặt thẻ */
  --deck2:#18253A;
  --hull:#1E2E47;         /* viền */
  --ink:#E9EEF7;
  --muted:#93A2BC;
  --faint:#64738D;

  --gold:#E8B44A;         /* bounty / hải tặc */
  --gold-soft:#2A2313;
  --steel:#5FA0F0;        /* honor / hải quân */
  --steel-soft:#132437;

  --ok:#4FBE94; --ok-soft:#102A22;
  --bad:#F0796B; --bad-soft:#2E1714;

  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono","Roboto Mono",monospace;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; overflow-x:hidden}
body{
  background:
    radial-gradient(1100px 520px at 50% -8%, #16294450 0%, transparent 62%),
    var(--sea);
  color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-text-size-adjust:100%; min-height:100vh;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:5px}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

.wrap{max-width:820px; margin:0 auto; padding:22px 16px 70px}
.grow{flex:1}
.inline{display:inline}

/* ---------- thanh trên ---------- */
.bar{position:sticky; top:0; z-index:40; background:#0A1220ee; backdrop-filter:blur(9px);
     border-bottom:1px solid var(--hull)}
.bar-in{max-width:820px; margin:0 auto; padding:9px 16px; display:flex; align-items:center; gap:11px}
.logo{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.13em; color:var(--gold)}
.logo span{display:block; font-size:9.5px; letter-spacing:.1em; color:var(--faint); font-weight:400; margin-top:1px}
.score{display:flex; flex-direction:column; align-items:flex-end; line-height:1.1;
       padding:4px 11px; border-radius:8px; border:1px solid var(--hull); background:var(--deck)}
.score b{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.score .num{font-family:var(--mono); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums}
.score.pirate .num{color:var(--gold)}
.score.marine .num{color:var(--steel)}
.who{font-size:13px; color:var(--muted); display:none}
@media(min-width:520px){ .who{display:inline} }
.ghost{border:1px solid var(--hull); background:var(--deck); border-radius:7px;
       padding:5px 10px; font-size:12.5px; color:var(--muted)}
.ghost:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- chung ---------- */
h1{font-size:clamp(24px,6vw,33px); line-height:1.15; letter-spacing:-.02em; margin:0 0 10px; text-wrap:balance}
h2{font-size:19px; margin:0 0 9px}
.lbl{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
     text-transform:uppercase; color:var(--faint)}
.lede{color:var(--muted); font-size:15px; margin:0 0 16px; max-width:60ch}
.flash{background:var(--gold-soft); border:1px solid #6E5525; color:var(--gold);
       border-radius:9px; padding:11px 14px; font-size:14.5px; margin-bottom:16px}
.card{background:var(--deck); border:1px solid var(--hull); border-radius:13px; padding:18px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

.btn{display:inline-block; width:100%; text-align:center; padding:14px;
     border-radius:10px; background:var(--gold); color:#151005; font-weight:700;
     font-family:var(--mono); font-size:15px; letter-spacing:.02em; transition:.12s}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.alt{background:var(--deck2); color:var(--ink); border:1px solid var(--hull)}
.btn.alt:hover{border-color:var(--gold); color:var(--gold); filter:none}

/* ---------- bảng điểm lớn ---------- */
.poster{
  background:linear-gradient(180deg,var(--deck2),var(--deck));
  border:1px solid var(--hull); border-radius:14px; padding:22px 20px; text-align:center;
}
.poster .lbl{margin-bottom:7px}
.poster .big{font-family:var(--mono); font-size:clamp(31px,9.5vw,46px); font-weight:700;
             line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.poster.pirate .big{color:var(--gold)}
.poster.marine .big{color:var(--steel)}
.poster .cap{font-size:12.5px; color:var(--faint); margin-top:9px; font-family:var(--mono)}
.meter{height:6px; background:#0C1524; border-radius:100px; overflow:hidden; margin-top:14px;
       border:1px solid var(--hull)}
.meter i{display:block; height:100%; background:var(--gold); transition:width .4s}
.poster.marine .meter i{background:var(--steel)}

/* ---------- danh sách chế độ ---------- */
.modes{display:grid; gap:11px; margin-top:20px}
.mode{display:block; background:var(--deck); border:1px solid var(--hull);
      border-left:4px solid var(--gold); border-radius:12px; padding:16px 17px; transition:.13s}
.mode:hover{transform:translateX(3px); border-color:var(--gold)}
.mode .row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.mode h2{color:var(--gold); font-size:18px; margin:0}
.mode .tag{font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:100px;
           background:var(--gold-soft); color:var(--gold); white-space:nowrap}
.mode p{margin:7px 0 0; font-size:14px; color:var(--muted); line-height:1.5}
.mode .pay{margin-top:9px; font-family:var(--mono); font-size:12.5px; color:var(--faint)}
.mode .pay .up{color:var(--ok)} .mode .pay .dn{color:var(--bad)}

.mode.locked{border-left-color:var(--hull); opacity:.62; cursor:not-allowed}
.mode.locked:hover{transform:none; border-color:var(--hull)}
.mode.locked h2{color:var(--muted)}
.mode.locked .tag{background:#0C1524; color:var(--faint)}

/* ---------- câu hỏi ---------- */
.qmeta{display:flex; align-items:center; gap:12px; padding:14px 0 12px;
       font-family:var(--mono); font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.qcard{background:var(--deck); border:1px solid var(--hull); border-radius:13px; padding:19px}
.qhead{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
       color:var(--faint); margin-bottom:11px}
.qhead b{color:var(--gold)}
.qtext{font-size:16.5px; line-height:1.5; margin:0; overflow-wrap:anywhere}
pre.code{font-family:var(--mono); font-size:12.5px; line-height:1.65; background:#0C1524;
         border:1px solid var(--hull); border-left:3px solid var(--gold); border-radius:8px;
         padding:11px 13px; margin:12px 0 0; overflow-x:auto; white-space:pre-wrap; word-break:break-word}
.opts{display:grid; gap:8px; margin-top:16px}
.opt{display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
     background:var(--deck2); border:1.5px solid var(--hull); border-radius:9px;
     padding:11px 13px; transition:.12s}
.opt:hover{border-color:var(--gold)}
.opt .k{font-family:var(--mono); font-weight:700; font-size:12px; flex:none;
        width:21px; height:21px; border-radius:5px; display:grid; place-items:center;
        background:#0C1524; color:var(--muted); margin-top:1px}
.opt .v{flex:1; min-width:0; font-size:15px; line-height:1.45; overflow-wrap:anywhere}
.opt .v.mono{font-family:var(--mono); font-size:12.8px}
.opt[data-picked="1"]{border-color:var(--gold); background:var(--gold-soft)}
.opt[data-picked="1"] .k{background:var(--gold); color:#151005}

.nav{position:fixed; left:0; right:0; bottom:0; z-index:30; background:#0A1220f2;
     border-top:1px solid var(--hull); padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.nav-in{max-width:820px; margin:0 auto; display:flex; gap:9px}
.nav button{flex:1; padding:13px; border-radius:9px; border:1px solid var(--hull);
            background:var(--deck); font-family:var(--mono); font-size:14px; font-weight:700}
.nav button:hover:not(:disabled){border-color:var(--gold); color:var(--gold)}
.nav button:disabled{opacity:.32; cursor:not-allowed}
.nav button.go{background:var(--gold); color:#151005; border-color:var(--gold)}

.map{display:grid; grid-template-columns:repeat(auto-fill,minmax(36px,1fr)); gap:6px; margin-top:14px}
.cell{font-family:var(--mono); font-size:12px; padding:7px 0; border-radius:7px;
      border:1px solid var(--hull); background:var(--deck); color:var(--faint);
      font-variant-numeric:tabular-nums}
.cell[data-done="1"]{background:var(--gold-soft); border-color:var(--gold); color:var(--gold); font-weight:700}
.cell[data-cur="1"]{outline:2px solid var(--ink); outline-offset:1px}

/* ---------- chọn code ---------- */
.file{background:var(--deck); border:1px solid var(--hull); border-radius:12px; overflow:hidden}
.filebar{padding:8px 13px; border-bottom:1px solid var(--hull); background:#0C1524;
         font-family:var(--mono); font-size:12px; color:var(--muted)}
.codewrap{overflow-x:auto; padding:12px 0 14px}
table.code{border-collapse:collapse; font-family:var(--mono); font-size:12.5px; line-height:1.75; width:100%}
@media(max-width:520px){ table.code{font-size:11.5px} }
table.code td{padding:0; vertical-align:baseline; white-space:pre}
td.ln{width:1%; text-align:right; padding:0 11px 0 13px; color:var(--faint);
      font-size:11px; font-variant-numeric:tabular-nums; user-select:none; opacity:.7}
td.src{padding-right:15px; width:99%}
tr.now td.ln{color:var(--gold); opacity:1; font-weight:700}
tr.veil td.src{background:repeating-linear-gradient(105deg,#16223500 0 7px,#1A2840 7px 14px);
               border-radius:3px; opacity:.55}
tr.veil td.src *{visibility:hidden}
tr.more td{padding-top:3px; font-family:var(--sans); font-size:12px; color:var(--faint); white-space:normal}
.slot{display:inline-block; min-width:10ch; padding:0 7px; border-radius:5px;
      border:1.5px dashed #6E5525; background:var(--gold-soft); color:var(--gold);
      font-weight:700; white-space:pre}
.filled{background:var(--ok-soft); border-radius:3px; padding:0 2px; box-shadow:inset 0 -1px 0 #2C6350}

/* ---------- kết quả ---------- */
.res{background:var(--deck); border:1px solid var(--hull); border-radius:13px;
     padding:24px 20px; text-align:center}
.res .big{font-family:var(--mono); font-size:clamp(33px,10vw,48px); font-weight:700; line-height:1;
          font-variant-numeric:tabular-nums}
.res .sub{font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:8px}
.delta{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:17px; font-weight:700;
       padding:6px 14px; border-radius:9px}
.delta.up{background:var(--ok-soft); color:var(--ok); border:1px solid #2C6350}
.delta.dn{background:var(--bad-soft); color:var(--bad); border:1px solid #7A3D37}
.ledger{margin-top:16px; border:1px solid var(--hull); border-radius:11px; overflow:hidden}
.ledger .li{display:flex; justify-content:space-between; gap:12px; padding:10px 14px;
            font-size:14px; border-bottom:1px solid var(--hull)}
.ledger .li:last-child{border-bottom:0}
.ledger .li span:last-child{font-family:var(--mono); font-variant-numeric:tabular-nums}
.ledger .li.total{background:var(--deck2); font-weight:700}
.ledger .li .up{color:var(--ok)} .ledger .li .dn{color:var(--bad)}

.attack{margin-top:16px; border-radius:12px; padding:16px 17px; border:1px solid #7A3D37;
        background:linear-gradient(180deg,#2E1714,#1B1210)}
.attack.spare{border-color:#2C6350; background:linear-gradient(180deg,#102A22,#0E1A18)}
.attack .who{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
             text-transform:uppercase; color:var(--bad); margin-bottom:5px}
.attack.spare .who{color:var(--ok)}
.attack .say{font-size:16px; font-weight:700; margin:0}
.attack .det{margin:8px 0 0; font-size:13.5px; color:var(--muted); font-family:var(--mono)}

.wrongs{display:grid; gap:8px; margin-top:11px}
.wrongitem{background:var(--deck); border:1px solid var(--hull); border-left:3px solid var(--bad);
           border-radius:0 9px 9px 0; padding:11px 13px; font-size:13.5px; color:var(--muted);
           overflow-wrap:anywhere}

/* ---------- bảng xếp hạng ---------- */
.board{border:1px solid var(--hull); border-radius:12px; overflow:hidden; margin-top:10px}
.brow{display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--hull);
      background:var(--deck)}
.brow:last-child{border-bottom:0}
.brow .rk{font-family:var(--mono); font-size:13px; color:var(--faint); width:2.4ch; text-align:right;
          font-variant-numeric:tabular-nums}
.brow .nm{flex:1; font-size:15px; overflow-wrap:anywhere}
.brow .vl{font-family:var(--mono); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums}
.brow.pirate .vl{color:var(--gold)} .brow.marine .vl{color:var(--steel)}
.brow.me{background:var(--deck2)}
.brow.me .nm::after{content:" · bạn"; color:var(--faint); font-size:12px}
.crown{color:var(--gold)}
.tabs{display:flex; gap:8px; margin-top:16px}
.tabs button{flex:1; padding:10px; border-radius:9px; border:1px solid var(--hull);
             background:var(--deck); font-size:14px; color:var(--muted)}
.tabs button[aria-pressed="true"]{background:var(--deck2); color:var(--ink); border-color:var(--gold)}

/* ---------- form ---------- */
.form{max-width:400px; margin:34px auto 0}
.field{margin-bottom:13px}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:5px}
.field input{width:100%; padding:12px 13px; border-radius:9px; border:1px solid var(--hull);
             background:#0C1524; color:var(--ink); font-size:15.5px; font-family:var(--sans)}
.field input:focus{outline:none; border-color:var(--gold)}
.picks{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.pick{border:1.5px solid var(--hull); background:var(--deck); border-radius:10px; padding:13px;
      text-align:center; transition:.12s}
.pick:hover{border-color:var(--gold)}
.pick b{display:block; font-size:15px}
.pick small{display:block; font-size:11.5px; color:var(--faint); margin-top:3px; font-family:var(--mono)}
.pick[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-soft)}
.pick.marine[aria-pressed="true"]{border-color:var(--steel); background:var(--steel-soft)}
.err{background:var(--bad-soft); border:1px solid #7A3D37; color:var(--bad);
     border-radius:9px; padding:10px 13px; font-size:14px; margin-bottom:13px}
.alt-link{text-align:center; margin-top:16px; font-size:14px; color:var(--muted)}
.alt-link a{color:var(--gold)}
.hide{display:none !important}