:root{
  --sky:#d6ecf5; --card:#ffffff; --ink:#17324d; --muted:#4f6b85;
  --sun:#ffc83d; --berry:#e5476a; --leaf:#2f9e6a; --line:#b9d6e4;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --sky:#0f2233; --card:#183148; --ink:#e7f1f8; --muted:#a6bfd3; --line:#2b4a66; }
}
:root[data-theme="dark"]{ --sky:#0f2233; --card:#183148; --ink:#e7f1f8; --muted:#a6bfd3; --line:#2b4a66; }
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--sky);color:var(--ink);font:400 17px/1.55 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Baloo 2",Nunito,system-ui,sans-serif;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2rem,6vw,2.8rem);font-weight:800}
h2{font-size:1.45rem}
h3{font-size:1.15rem;margin-top:1.2em}
a{color:inherit}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;max-width:900px;margin:0 auto;padding:16px 20px}
.brand{font:800 1.3rem "Baloo 2",sans-serif;text-decoration:none}
.top nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.top nav form{margin:0}
.who{color:var(--muted)}
main{max-width:900px;margin:0 auto;padding:8px 20px 60px}
.card{background:var(--card);border:2px solid var(--line);border-radius:24px;padding:22px 20px;margin:18px 0}
.card.danger{border-color:var(--berry)}
.hero p{max-width:55ch}
.sub{font-size:.55em;color:var(--muted);font-weight:600}
.hint{color:var(--muted);font-size:.92rem}
.flash{background:color-mix(in srgb,var(--sun) 30%,var(--card));border-radius:16px;padding:12px 16px;font-weight:700}
.err{color:var(--berry);font-weight:700}
.err ul{margin:0;padding-left:1.2em}
.stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:0;padding:0;margin:0}
.inline{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lab{font-weight:700;margin-top:8px}
.check{display:flex;gap:10px;align-items:flex-start;max-width:60ch}
.check input{margin-top:.35em;width:20px;height:20px;accent-color:var(--berry)}
input[type=text],input:not([type]),input[type=email],input[type=number],select{
  font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 12px;min-width:16ch}
input[type=range]{width:min(320px,70vw);accent-color:var(--berry)}
output{font-weight:800;color:var(--berry)}
.btn,button.btn{display:inline-block;font:700 1.05rem "Baloo 2",Nunito,sans-serif;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:10px 22px;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--berry);border-color:var(--berry);color:#fff}
.btn.danger{border-color:var(--berry);color:var(--berry)}
.btn.small{padding:4px 14px;font-size:.95rem}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
fieldset:disabled{opacity:.6}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.list{list-style:none;padding:0;margin:12px 0}
.list li{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.list li:last-child{border-bottom:0}
.list form{margin:0}
.code{font:800 clamp(2.4rem,9vw,3.4rem) "Baloo 2",sans-serif;letter-spacing:.12em;margin:.2em 0 0;color:var(--berry)}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.95rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-family:"Baloo 2",sans-serif}
.chart{width:100%;max-width:600px;height:auto;display:block;margin:8px 0 16px}
.chart polyline{fill:none;stroke:var(--berry);stroke-width:3;stroke-linejoin:round}
.chart .axis{stroke:var(--line);stroke-width:2}

/* Élő követés és visszajátszás */
.actions-row{margin:8px 0 0}
.viewer{margin:12px 0}
.v-status{font-weight:700;margin:0 0 8px}
.v-stage{position:relative;border-radius:18px;overflow:hidden;border:2px solid var(--line);background:#bfe3f2;touch-action:none}
.v-stage canvas{display:block;width:100%;height:auto}
.v-label{position:absolute;padding:2px 10px;border-radius:999px;background:rgba(23,50,77,.82);color:#fff;font:600 .85rem Nunito,sans-serif;pointer-events:none}
.v-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.v-controls input[type=range]{flex:1 1 220px;width:auto}
.v-time{font-variant-numeric:tabular-nums;min-width:11ch}
.v-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}
.v-stats div{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 12px}
.v-stats dt{font-size:.85rem;color:var(--muted)}
.v-stats dd{margin:0;font:800 1.2rem "Baloo 2",sans-serif}
.v-events{max-height:320px;overflow:auto;padding-left:1.4em;margin:0}
.v-events li{padding:2px 0}
.v-events .link{font-variant-numeric:tabular-nums;font-weight:700;color:var(--berry)}

/* Kiértékelés */
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick,.chart .legend{font:12px Nunito,sans-serif;fill:var(--muted)}
.chart .legend{fill:var(--ink)}
.chart polyline.s1,.chart polyline.s2,.chart polyline.s3{fill:none;stroke-width:2.5;stroke-linejoin:round}
.chart .s1{stroke:var(--berry);fill:var(--berry)}
.chart .s2{stroke:var(--leaf);fill:var(--leaf)}
.chart .s3{stroke:var(--ink);fill:var(--ink)}
td.wrap{white-space:normal;min-width:18ch;font-size:.85rem;color:var(--muted)}
.report{border-top:2px dashed var(--line);padding:16px 0}
.report.draft{background:color-mix(in srgb,var(--sun) 10%,transparent);border-radius:16px;padding:16px;border:2px dashed var(--sun);margin:12px 0}
.report header{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin-bottom:8px}
.report h4{font-family:"Baloo 2",sans-serif;margin:12px 0 4px}
.report .note{background:var(--sky);border-radius:12px;padding:10px 12px}
.report details{margin:12px 0}
.report-actions{align-items:flex-end;margin-top:8px}
pre.json{white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto;font-size:.8rem;background:var(--sky);padding:10px;border-radius:12px}
textarea{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 12px;width:min(520px,100%)}
.defs dt{font-weight:800;margin-top:8px}
.defs dd{margin:0 0 4px}
.game-group{border:1px solid var(--line, #b9d6e4);border-radius:12px;padding:6px 12px 10px;margin:8px 0}
.game-group legend{font-weight:700;padding:0 6px}
.game-group .check{display:inline-flex;margin:4px 18px 4px 0}
.acl td.wrap{color:var(--ink);font-size:.95rem;min-width:24ch}
.acl select{min-width:0}
.acl form{margin:0}
.chip{display:inline-block;border-radius:999px;padding:2px 12px;font-size:.85rem;font-weight:700;border:2px solid var(--line)}
.chip.ok{border-color:var(--leaf);color:var(--leaf)}
.chip.warn{border-color:var(--sun);background:color-mix(in srgb,var(--sun) 20%,transparent)}
.chip.bad{border-color:var(--berry);color:var(--berry)}
.sub-card{border-color:var(--sun)}
.sub-card.bad{border-color:var(--berry)}
.sub-head{justify-content:space-between}
.sub-head h2{margin:0}
.sub-row details{margin-top:12px}
.sub-row summary{cursor:pointer;font-weight:700}
.rc-status{display:flex;gap:10px;align-items:center;font-size:1.1rem}
.rc-dot{width:14px;height:14px;border-radius:50%;background:var(--line);flex:0 0 14px}
.rc-dot.on{background:var(--leaf);box-shadow:0 0 0 4px color-mix(in srgb,var(--leaf) 25%,transparent)}
.rc-grid{display:flex;flex-wrap:wrap;gap:8px}
.rc-game[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.rc-game:disabled,#rcMenu:disabled{opacity:.45;cursor:not-allowed}
.remote h3{margin:1em 0 .5em}
table.plan{min-width:560px}
table.plan td{vertical-align:middle}
table.plan select{min-width:22ch}
table.plan .num{min-width:0;width:7ch}
table.plan .n{font-weight:800;color:var(--muted)}
.nowrap{white-space:nowrap}
.lives-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 14px}
.lives-grid select{min-width:0;width:100%}
input.num{min-width:0;width:7ch}
.v-lives{background:rgba(229,71,106,.92);font-size:1.05rem;letter-spacing:.06em}
input.time{width:8ch;font-variant-numeric:tabular-nums}
input.invalid{border-color:var(--berry);background:color-mix(in srgb,var(--berry) 8%,var(--card))}
.tabs{display:flex;gap:4px;margin:18px 0 0;border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:10px 18px;font:700 1.05rem "Baloo 2",Nunito,sans-serif;text-decoration:none;color:var(--muted);border-bottom:4px solid transparent;margin-bottom:-2px;border-radius:12px 12px 0 0}
.tab:hover{color:var(--ink);background:color-mix(in srgb,var(--line) 35%,transparent)}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--berry)}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.pager [aria-disabled="true"]{opacity:.4;cursor:default}
.rec-filter{margin:6px 0 4px}
.rec-filter select{min-width:22ch}
.sub-card.ok{border-color:var(--leaf)}
.v-badges{position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.v-badges .v-label{position:static}
.v-score{background:rgba(23,50,77,.9);font-size:1rem}