/* Prognas Playground — pixel-office look, related to Mission Control's Visual Office. */
:root{
  --paper:#f4efe6; --card:#fffdf8; --ink:#2b2118; --muted:#7a6a58; --line:#2b2118; --soft:#e8dccb;
  --green:#2f6f4f; --green-2:#3f8f66; --green-soft:#e1f1e6; --gold:#e0a526; --gold-soft:#fbf0d2;
  --red:#b9442f; --red-soft:#f9e1dc; --blue:#2f5f8f; --blue-soft:#e0ebf7; --grey-soft:#ecebe8;
  --corridor:#d8c9b0; --shadow:3px 3px 0 var(--line); --radius:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}
a{color:var(--green)}
h1{font-size:1.6rem;line-height:1.2;margin:.2em 0 .4em}
h2{font-size:1.2rem;margin:.2em 0 .6em}
h3{font-size:1rem;margin:1em 0 .4em}
code{background:var(--soft);padding:0 4px;border-radius:4px}
.muted{color:var(--muted)} .small{font-size:.86rem}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{border:2px solid var(--line);border-radius:8px;background:#fff;padding:.5em .65em;max-width:100%;font-weight:400}
textarea{width:100%;resize:vertical}
label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.92rem}

/* ---------- chrome */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));
  background:var(--green);color:#fff;border-bottom:3px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.2px}
.brand img{image-rendering:pixelated;border:2px solid var(--line);border-radius:6px;background:#fff}
.brand b{font-weight:800;color:#ffe08a;margin-left:2px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:8px;font-weight:600;font-size:.95rem}
.nav a.on,.nav a:hover{background:rgba(0,0,0,.22)}
.top .me{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;background:rgba(0,0,0,.22);padding:3px 10px 3px 6px;border-radius:20px}
.top .me b{font-size:1rem} .top .me small{opacity:.8}
.wrap{max-width:1040px;margin:0 auto;padding:16px 16px 48px}
.bare .wrap{max-width:520px}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:0 0 16px}
.flash{border:2px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 14px;font-weight:600}
.flash.ok{background:var(--green-soft)} .flash.err{background:var(--red-soft)}
.crumbs{margin:0 0 8px} .crumbs a{text-decoration:none;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--line);border-radius:8px;background:#fff;
  padding:.5em .95em;font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink);box-shadow:2px 2px 0 var(--line);min-height:40px}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn.primary{background:var(--green);color:#fff}
.btn.small{min-height:32px;padding:.25em .65em;font-size:.88rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:2px solid var(--line);border-radius:20px;padding:2px 10px;font-weight:700;font-size:.9rem}
.badge{display:inline-block;font-size:.75rem;font-weight:800;border:2px solid var(--line);border-radius:6px;padding:0 6px;background:var(--soft)}
.badge.ok{background:var(--green-soft)} .badge.warn{background:var(--gold-soft)}
.bar{display:block;height:10px;background:#fff;border:2px solid var(--line);border-radius:6px;overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--green-2)} .bar i.bad{background:var(--red)}
.bar.wide{max-width:360px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.tabs button,.tabs a{border:2px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.tabs .on{background:var(--ink);color:#fff}
.stack{display:flex;flex-direction:column;gap:12px}
.row-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.row-form>*{flex:1 1 160px} .row-form>.btn{flex:0 0 auto}
.plain{list-style:none;padding:0;margin:0} .plain li{padding:6px 0;border-bottom:1px dashed var(--soft)}
.plain .ok{color:var(--green);font-weight:800} .plain .no{color:var(--red);font-weight:800}

/* ---------- pixel characters (same construction as Visual Office) */
.avatar{--ink:#111;--skin:#f6d3b0;--hair:#1a1a1a;--shirt:#8ec8f8;--pants:#3a78d0;--shoe:#2458a0;
  display:inline-block;position:relative;width:40px;text-align:center;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.25));vertical-align:bottom}
.avatar .head{display:block;box-sizing:content-box;width:20px;height:16px;margin:10px auto 0;background:var(--skin);border:2px solid var(--ink);position:relative;z-index:2}
.avatar .head:before,.avatar .head:after{content:'';position:absolute;top:6px;width:4px;height:4px;background:#111}
.avatar .head:before{left:3px} .avatar .head:after{right:3px}
.avatar .hair{position:absolute;box-sizing:content-box;left:-4px;right:-4px;top:-9px;height:7px;background:var(--hair);border:2px solid var(--ink);border-bottom:0;z-index:3}
.avatar .body{display:block;box-sizing:content-box;width:22px;height:13px;margin:-2px auto 0;background:var(--shirt);border:2px solid var(--ink);position:relative;z-index:1}
.avatar .arm{position:absolute;box-sizing:content-box;top:1px;width:4px;height:12px;border:2px solid var(--ink);background:linear-gradient(var(--shirt) 0 7px,var(--skin) 7px)}
.avatar .arm.l{left:-9px} .avatar .arm.r{right:-9px}
.avatar .legs{display:flex;justify-content:space-between;width:24px;height:11px;margin:-2px auto 0}
.avatar .leg{display:block;box-sizing:content-box;width:6px;height:11px;background:linear-gradient(var(--pants) 0 7px,var(--shoe) 7px);border:2px solid var(--ink);border-top:0}
.avatar .label{display:block;margin-top:3px;font-size:10px;font-weight:700;background:#fffaf3;border:1px solid #e2c9a4;border-radius:6px;padding:0 5px;white-space:nowrap}
.avatar.look-hijab .hair{top:-9px;bottom:-5px;height:auto;left:-5px;right:-5px;border-bottom:2px solid var(--ink);z-index:1;background:var(--shirt);filter:brightness(.85)}
.avatar.look-hijab .head{z-index:2}
.avatar.look-hijab .head:before,.avatar.look-hijab .head:after{z-index:3}
.avatar.look-surveyor{--shirt:#34495e;--pants:#2c3e50;--shoe:#111;--hair:#2b2b2b}
.avatar.look-surveyor .body:after{content:'';position:absolute;right:-16px;top:0;width:10px;height:13px;background:#fff;border:2px solid var(--ink);box-shadow:inset 0 3px 0 #d4a017}
.avatar.look-guru{--shirt:#fdfdfd;--pants:#4a6fa5;--hair:#8a8a8a}
.avatar.look-guru .head:before,.avatar.look-guru .head:after{width:6px;height:5px;background:transparent;border:2px solid #111;top:4px}
.avatar.look-guru .head:before{left:1px} .avatar.look-guru .head:after{right:1px}
.avatar.mini{transform:scale(.62);transform-origin:center;width:32px;margin:-10px -4px -8px;filter:none}
.avatar.mini .head{margin-top:6px}
@media (prefers-reduced-motion:no-preference){
  .avatar.player,.avatar.npc{animation:bob 2.6s ease-in-out infinite}
  .avatar.npc{animation-delay:-1.2s}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* ---------- lobby: the building */
.hello{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.hello p{margin:0;max-width:640px;color:var(--muted)}
/* ---------- room page */
.room-hero{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.room-hero p{margin:0 0 6px;color:var(--muted)}
.big-ico{font-size:2.6rem;width:72px;height:72px;display:grid;place-items:center;background:var(--card);border:2px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex:0 0 auto}
.big-ico .avatar{transform:scale(1.2)}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:0 0 18px}
.mode{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;text-decoration:none;color:var(--ink)}
.mode span{font-size:1.5rem} .mode small{color:var(--muted);font-size:.85rem}
.mode.disabled{opacity:.55;pointer-events:none} .mode em{font-size:.75rem;color:var(--red);font-style:normal;font-weight:700}
.sec{margin-top:8px}
.std-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.maksud{background:var(--gold-soft);border:2px dashed #c9a24a;border-radius:8px;padding:8px 10px;font-size:.92rem}
.ep{border:2px solid var(--line);border-radius:8px;margin:8px 0;background:#fff}
.ep summary{display:flex;gap:10px;align-items:flex-start;padding:10px;cursor:pointer;list-style:none}
.ep summary::-webkit-details-marker{display:none}
.epno{flex:0 0 auto;background:var(--ink);color:#fff;border-radius:6px;padding:0 6px;font-weight:800;font-size:.85rem}
.el{flex:1}
.epbody{padding:0 12px 12px;border-top:1px dashed var(--soft)}
.tel{list-style:none;padding:0;margin:0 0 8px} .tel li{margin:4px 0}
.k{display:inline-block;width:22px;text-align:center;border:2px solid var(--line);border-radius:4px;font-size:.78rem;margin-right:4px}
.kR{background:#f9e2af} .kD{background:#cfe3f7} .kO{background:#cdeccf} .kW{background:#f5c2e7} .kS{background:#e0d4f7}
.row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--soft)}
.btns{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- games */
.game-head{display:flex;align-items:center;gap:12px;border-bottom:2px dashed var(--soft);padding-bottom:10px;margin-bottom:14px}
.game-head h1{font-size:1.25rem;margin:0} .game-head small{color:var(--muted)}
.gi{font-size:1.9rem;flex:0 0 auto}
.hud{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hud span{background:#fff;border:2px solid var(--line);border-radius:20px;padding:0 10px;font-weight:800;white-space:nowrap}
.qmeta{font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.prompt{font-size:1.2rem;margin:0 0 10px}
.ctx{margin:0 0 14px;padding:12px 14px;background:var(--blue-soft);border-left:6px solid var(--blue);border-radius:6px;white-space:pre-line}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;border:2px solid var(--line);border-radius:10px;background:#fff;padding:12px;cursor:pointer;box-shadow:2px 2px 0 var(--line);font-size:1rem}
.opt:hover:not([disabled]){background:#fffbe9}
.opt .key{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;background:var(--soft);border:2px solid var(--line);border-radius:6px;font-weight:800}
.opt[disabled]{cursor:default}
.opt.right{background:var(--green-soft);border-color:var(--green)} .opt.right .key{background:var(--green);color:#fff}
.opt.wrong{background:var(--red-soft);border-color:var(--red)} .opt.wrong .key{background:var(--red);color:#fff}
.opts.tf{grid-template-columns:1fr 1fr} .opts.tf .opt{justify-content:center;font-weight:800;font-size:1.1rem;padding:18px}
.result{margin-top:14px}
.verdict{border:2px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.verdict.ok{background:var(--green-soft)} .verdict.no{background:var(--red-soft)}
.verdict h3{margin:0 0 4px}
.verdict p{margin:4px 0 0}
.result .btn{margin-top:12px}
.done-box{text-align:center;padding:20px 8px}
.done-box .big{font-size:3rem;line-height:1}
.done-box .btns{justify-content:center;margin-top:14px}
.empty{padding:16px;text-align:center;color:var(--muted)}
.hints{margin:0 0 12px}
.hints ol{margin:6px 0 0;padding-left:20px}
.pick h3{font-size:.9rem;margin:12px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.stdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.pickbtn{border:2px solid var(--line);border-radius:8px;background:#fff;padding:6px 8px;cursor:pointer;text-align:left;font-weight:700;font-size:.9rem;line-height:1.2}
.pickbtn small{display:block;font-weight:500;color:var(--muted);font-size:.75rem}
.pickbtn.on{background:var(--ink);color:#fff} .pickbtn.on small{color:#ddd}
.epgrid{display:flex;gap:6px;flex-wrap:wrap}
.epgrid .pickbtn{min-width:56px;text-align:center}
.flash-card{border:3px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow);padding:20px;min-height:220px}
.flash-card .front{text-align:center;padding:30px 0}
.flash-card .front b{display:block;font-size:1.7rem}
.flash-card .front small{color:var(--muted)}
.flash-card dl{margin:0} .flash-card dt{font-weight:800;margin-top:10px;font-size:.85rem;text-transform:uppercase;color:var(--muted);letter-spacing:.4px}
.flash-card dd{margin:2px 0 0}
.boxes{display:flex;gap:4px;justify-content:center;margin-top:10px}
.boxes i{width:14px;height:14px;border:2px solid var(--line);border-radius:3px;background:#fff} .boxes i.on{background:var(--gold)}
.rate{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}

/* ---------- chat (tutor + simulation) */
.chat .intro{margin:0 0 12px;font-size:.92rem}
.log{display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:62vh;overflow:auto;padding:4px 2px 12px}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg .who{flex:0 0 auto;width:36px}
.msg .who .avatar{transform:scale(.8);transform-origin:bottom center}
.bubble{border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;box-shadow:2px 2px 0 var(--line);overflow-wrap:anywhere}
.msg.me .bubble{background:var(--green-soft)}
.bubble.err{background:var(--red-soft)}
.bubble p{margin:0 0 6px} .bubble p:last-child{margin:0}
.bubble ul,.bubble ol{margin:4px 0 6px;padding-left:20px}
.bubble .tag{display:inline-block;font-size:.75rem;font-weight:800;background:var(--ink);color:#fff;border-radius:6px;padding:0 6px;margin-bottom:4px}
.bubble.summary{background:var(--gold-soft)}
.grade{border:2px solid var(--line);border-radius:12px;background:#fff;padding:12px;box-shadow:2px 2px 0 var(--line)}
.grade .nilai{display:inline-block;font-weight:900;font-size:1.1rem;border:2px solid var(--line);border-radius:8px;padding:0 10px;margin-right:6px}
.n-TL{background:var(--green-soft)} .n-TS{background:var(--gold-soft)} .n-TT{background:var(--red-soft)} .n-TDD{background:var(--grey-soft)}
.grade h4{margin:10px 0 2px;font-size:.85rem;text-transform:uppercase;color:var(--muted)}
.grade ul{margin:0;padding-left:20px}
.grade details{margin-top:8px;font-size:.88rem;color:var(--muted)}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;background:var(--muted);border-radius:50%;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.composer{display:flex;gap:8px;align-items:flex-end;border-top:2px dashed var(--soft);padding-top:12px}
.composer textarea{flex:1}
.start-panel{text-align:center;padding:24px 8px}

/* ---------- leaderboard, profile */
.board{list-style:none;padding:0;margin:0}
.lb{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px dashed var(--soft)}
.lb.me{background:var(--gold-soft);border-radius:8px}
.lb .rank{width:32px;text-align:center;font-weight:800;font-size:1.1rem}
.lb .who{flex:1;display:flex;flex-direction:column;line-height:1.2} .lb .who small{color:var(--muted)}
.lb .pts{font-weight:900}
.prog-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) auto;gap:10px;align-items:center;padding:6px 0}
.prog-row small{color:var(--muted)}

/* ---------- admin */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}
.kpi b{display:block;font-size:1.6rem} .kpi span{color:var(--muted);font-size:.88rem}
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--soft);vertical-align:top}
.tbl tr.off{opacity:.5}
.tbl small{color:var(--muted)}
form.inline{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
form.inline input{width:84px;padding:.25em .4em}
.copyrow{display:flex;flex-wrap:wrap;gap:8px} .copyrow input{flex:1 1 260px}
.new-link{background:var(--gold-soft)}
.bank-item{display:flex;flex-direction:column;gap:8px}
.bank-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .bank-head small{color:var(--muted)}

/* ---------- login */
.login{text-align:center;margin-top:24px}
.login form{text-align:left;margin:14px 0}
.login-art{display:flex;justify-content:center}
.login-art .avatar{transform:scale(1.6);margin:18px 0 22px}

/* ---------- phones */
@media (max-width:760px){
  .nav a{padding:6px 7px;font-size:.88rem}
}
@media (max-width:600px){
  body{font-size:15px}
  .top{gap:8px;padding:8px 12px}
  .brand span{display:none}
  .top .me small{display:none}
  .wrap{padding:12px 12px 40px}
  h1{font-size:1.35rem}
  .room-hero{gap:10px} .big-ico{width:56px;height:56px;font-size:2rem}
  .modes{grid-template-columns:1fr 1fr;gap:8px} .mode{padding:10px} .mode small{display:none}
  .card{padding:12px}
  .game-head{flex-wrap:wrap} .hud{margin-left:0;width:100%;justify-content:flex-start}
  .opts.tf{grid-template-columns:1fr 1fr}
  .msg{max-width:100%}
  .prog-row{grid-template-columns:1fr auto} .prog-row .bar{grid-column:1/-1;order:3}
}

/* ---------- PIN login */
.flash.warn{background:var(--gold-soft)}
a.banner{display:block;text-decoration:none;color:var(--ink)}
.code-login{margin-top:16px;text-align:left;border-top:2px dashed var(--soft);padding-top:12px}
.code-login summary{cursor:pointer;font-weight:700;color:var(--green)}
.code-login form{margin:12px 0}
.stack.narrow{max-width:360px}
form.inline input.uname{width:110px}
@media (max-width:440px){
  .top{gap:6px;padding-left:10px;padding-right:10px}
  .nav{gap:0} .nav a{padding:6px 5px;font-size:.82rem}
  .top .me{padding:2px 8px 2px 2px;gap:2px} .top .me b{font-size:.85rem}
}

/* ---------- implementation content */
.qtag{display:inline-block;font-size:.75rem;font-weight:800;background:var(--ink);color:#fff;border-radius:6px;padding:0 6px;margin-bottom:6px}
.btns .report{background:#fff;color:var(--muted);box-shadow:none;border-style:dashed}
.kartu .arti{font-weight:600;background:var(--green-soft);border-left:5px solid var(--green);padding:8px 10px;border-radius:6px}
.kartu h4,.epbody h4{margin:12px 0 4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.kartu ul{margin:0;padding-left:20px} .kartu li{margin:3px 0}
.kartu ul.trap li::marker{content:'⚠ '}
.kartu ul.contoh{list-style:none;padding:0} .kartu ul.contoh .nilai{display:inline-block;min-width:38px;text-align:center;font-weight:800;border:2px solid var(--line);border-radius:6px;margin-right:4px}
.flash-card .front .el-big{font-size:1.25rem;font-weight:700;margin:10px 0}
.flash-card .front small{color:var(--muted);font-weight:700}
.kartu .el-small{font-weight:700;margin:2px 0 8px}
details.maksud summary{cursor:pointer}
details.maksud p{margin:8px 0 0}
.tbl.cov td{text-align:center} .tbl.cov td:first-child{text-align:left}
.tbl.cov td.zero{color:var(--red);font-weight:800}
.tbl.cov a.bad{color:var(--red);font-weight:800}

/* ---------- lobby zones (grouped menus) */
.zone{position:relative;background:var(--card);border:3px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px;margin:0 0 16px;
  background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(0,0,0,.035) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(0,0,0,.035) 23px 24px)}
.zone-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px;min-height:44px}
.zone-head h2{margin:0;font-size:1.1rem} .zone-head small{color:var(--muted)}
.zone-head .avatar{flex:0 0 auto;margin-right:6px}
.zone.programs{background-color:#fbf4e6}
.zone.aula{background-color:#f6ecd0} .zone.latihan{background-color:#e7f0f7}
.zone.surv{background-color:#e9ebee} .zone.lib{background-color:#efe6d6}
.prog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.prog-row{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:10px;padding:10px 12px;
  text-decoration:none;color:var(--ink);box-shadow:2px 2px 0 var(--line)}
.prog-row:hover{background:#fffbe9} .prog-row:active{transform:translate(2px,2px);box-shadow:none}
.pico{font-size:1.7rem;width:44px;height:44px;display:grid;place-items:center;background:var(--soft);border:2px solid var(--line);border-radius:8px;flex:0 0 auto}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pinfo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pinfo small{color:var(--muted);font-size:.78rem}
.pcount{font-weight:900;font-size:.95rem}
.lulus{position:absolute;right:8px;top:-9px;background:#fff;border:2px solid var(--red);color:var(--red);font-weight:900;font-size:.68rem;letter-spacing:1px;padding:0 5px;border-radius:5px;transform:rotate(-6deg)}
.zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.zones .zone{margin:0}
.zones.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}
.zbtns{display:flex;flex-direction:column;gap:8px}
.zbtn{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:10px;padding:9px 12px;text-decoration:none;color:var(--ink);box-shadow:2px 2px 0 var(--line)}
.zbtn:hover{background:#fffbe9} .zbtn:active{transform:translate(2px,2px);box-shadow:none}
.zbtn .zi{font-size:1.35rem;width:30px;text-align:center;flex:0 0 auto}
.zbtn .zt{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0} .zbtn small{color:var(--muted);font-size:.8rem}
.zbtn em{font-size:.72rem;color:var(--red);font-style:normal;font-weight:700}
.zbtn .go{font-size:1.4rem;color:var(--muted);font-weight:700}
.zbtn.disabled{opacity:.55;pointer-events:none}
.board-mini{background:#234;color:#fff;border:2px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.85rem}
.board-mini ol{margin:4px 0 0;padding-left:18px} .board-mini li span{float:right;font-weight:800} .board-mini .muted{color:#bbb;list-style:none;margin-left:-18px}
@media (max-width:900px){.prog-list{grid-template-columns:repeat(2,minmax(0,1fr))} .zones.three{grid-template-columns:1fr}}
@media (max-width:640px){.prog-list{grid-template-columns:1fr} .zones{grid-template-columns:1fr} .prog-row{padding:8px 10px} .pico{width:38px;height:38px;font-size:1.4rem}}

/* ---------- prizes */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.rcard{display:flex;flex-direction:column;background:var(--card);border:3px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.rcard.admin{flex-direction:row;padding:0} .rcard.admin .rphoto{width:220px;height:auto;min-height:180px;border-bottom:0;border-right:3px solid var(--line)}
.rcard.off{opacity:.6}
.rphoto{display:block;width:100%;height:200px;object-fit:cover;background:var(--soft);border-bottom:3px solid var(--line)}
.rphoto.nophoto{display:grid;place-items:center;font-size:4rem}
.rbody{padding:14px;flex:1;min-width:0}
.rbody h2{margin:6px 0 4px} .rbody p{margin:4px 0}
.rtags{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .rtags small{color:var(--muted)}
.rp-harian{background:#fbe3c8} .rp-mingguan{background:#d7e9f7} .rp-bulanan{background:#e6daf7}
.rrule{font-weight:700}
.rme{background:var(--gold-soft);border:2px dashed #c9a24a;border-radius:8px;padding:8px 10px;margin:8px 0;display:flex;flex-direction:column;gap:6px}
.rboard{list-style:none;padding:0;margin:0}
.rboard li{display:flex;align-items:center;gap:8px;padding:5px 4px;border-bottom:1px dashed var(--soft)}
.rboard li .rank{width:28px;text-align:center;font-weight:800} .rboard li .who{flex:1;display:flex;flex-direction:column;line-height:1.2}
.rboard li .who small{color:var(--muted)} .rboard li.win{background:var(--green-soft)} .rboard li.me{outline:2px solid var(--gold);border-radius:6px}
.rpast{margin-top:10px} .rpast summary{cursor:pointer;font-weight:700;color:var(--green)}
.rpast li small{display:block;color:var(--muted)}
.rwins{list-style:none;padding:0;margin:0}
.rwins li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--soft)}
.rwins li>span:nth-child(2){flex:1;display:flex;flex-direction:column} .rwins small{color:var(--muted)}
.rthumb{width:56px;height:56px;object-fit:cover;border:2px solid var(--line);border-radius:8px;flex:0 0 auto}
.rthumb.nophoto{display:grid;place-items:center;font-size:1.6rem;background:var(--soft)}
.zbtn.prize{background:#fff7e0}
.pthumbs{display:flex} .pthumbs img,.pthumbs span{width:34px;height:34px;object-fit:cover;border:2px solid var(--line);border-radius:6px;margin-left:-8px;background:#fff;display:grid;place-items:center}
.rform-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.photo-preview .rphoto{height:180px;border:2px solid var(--line);border-radius:8px}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:600}
label[hidden]{display:none}
h1+.zbtn.prize{margin-bottom:12px}
@media (max-width:700px){.rcard.admin{flex-direction:column} .rcard.admin .rphoto{width:100%;height:180px;border-right:0;border-bottom:3px solid var(--line)}
  .rform-grid{grid-template-columns:1fr} .rgrid{grid-template-columns:1fr}}
.period-hint{margin:0;background:var(--blue-soft);border-left:5px solid var(--blue);border-radius:6px;padding:8px 10px;font-size:.9rem}
.period-hint:empty{display:none}
.rsched{font-size:.88rem;color:var(--ink)}
.st-belum{background:var(--gold-soft)} .st-jalan{background:var(--green-soft)} .st-selesai{background:var(--grey-soft)}
.rp-khusus{background:#f7d9e3}