/* Vonk — shared look of the Working with Data games (lab/data/games.js).
 * Used with lab.css and lab/data/data.css (panel left, board right). */
.bar .aboutlink{margin-left:auto;}
body.gm-welcome .wd{grid-template-columns:1fr;}
body.gm-welcome .wd-grid{display:none;}
body.gm-welcome .bar h1 .sep{display:none;}
.gm-wel{max-width:820px; margin:0 auto; text-align:center; padding:8px 4px 24px; display:flex; flex-direction:column; align-items:center; gap:10px;}
.gm-wel h2{font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:clamp(30px,3.4vw,44px); margin:6px 0 0;}
.gm-lead{font-size:clamp(17px,1.6vw,20px); max-width:58ch; margin:0 auto 4px;}
.wd-panel .gm-wel .tut-invite{margin:2px auto 6px; align-items:center;}
.gm-big{font-size:18px; padding:13px 24px; align-self:center;}
.gm-pickh{margin:14px 0 0; font-size:14px; font-weight:600; color:var(--muted);}
.gm-levels{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; text-align:left; width:100%;}
.gm-levels.compact{grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:auto; padding-top:10px;}
.gm-levels.compact .gm-lvl span{display:none;}
.gm-lvl{position:relative; display:flex; align-items:center; gap:8px; border:none; border-radius:10px; padding:8px 10px; background:#fff; cursor:pointer;
        font:600 13.5px/1.25 var(--font-body); color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--line); text-align:left;}
.gm-lvl b{flex:none; min-width:24px; height:24px; padding:0 4px; border-radius:7px; display:grid; place-items:center; background:var(--warm); font:800 12px/1 ui-monospace, Menlo, monospace;}
.gm-lvl i{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:#137A47; color:#fff; font:800 11px/18px var(--font-body); text-align:center; font-style:normal;}
.gm-lvl.done b{background:#E3F4EC; color:#137A47;}
.gm-lvl.on{box-shadow:inset 0 0 0 2px var(--navy);}
.gm-lvl:hover, .gm-lvl:focus-visible{box-shadow:inset 0 0 0 2px var(--gold);}
.gm-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.gm-top .tut-btn{color:var(--teal); background:#E3F1F2; box-shadow:inset 0 0 0 1.5px #8FCBD0;}
.gm-goal{background:var(--navy); color:#fff; border-radius:12px; padding:9px 12px; font-size:15px; line-height:1.4;}
.gm-goal > span{display:block; font:800 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; color:#9FC3E8; margin-bottom:6px;}
.gm-goal b{color:var(--gold);}
.gm-conds{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;}
.gm-conds li{display:flex; gap:8px; align-items:flex-start; background:#fff; border-radius:10px; padding:7px 10px; font-size:14px; box-shadow:inset 0 0 0 1.5px var(--line);}
.gm-conds li .mk{width:1.1em; flex:none; font-weight:800; color:var(--muted);}
.gm-conds li.ok{box-shadow:inset 0 0 0 2px #9ED8B7; background:#F1FAF5;} .gm-conds li.ok .mk{color:#137A47;}
.wd-go.bounce{animation:gmHop 1.6s ease-in-out infinite;}
@keyframes gmHop{0%,40%,100%{transform:none;} 12%{transform:translateY(-6px);} 22%{transform:none;} 30%{transform:translateY(-3px);}}
.gm-board{flex:1; min-height:0; background:#fff; border-radius:12px; box-shadow:0 0 0 1.5px var(--line); padding:14px; display:flex; flex-direction:column; gap:12px; overflow:auto;}
.gm-cele{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; background:rgba(3,24,47,.35); overflow:hidden;}
.gm-cele-card{background:#fff; border-radius:18px; padding:18px 26px; text-align:center; box-shadow:0 0 0 3px var(--gold), 0 18px 50px rgba(0,0,0,.35); animation:gmPop .4s cubic-bezier(.2,1.4,.4,1);}
.gm-cele-card b{display:block; font-size:40px; color:#137A47;}
.gm-cele-card p{margin:4px 0 0; font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--navy);}
@keyframes gmPop{from{transform:scale(.6); opacity:0;} to{transform:none; opacity:1;}}
.gm-cf{position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:gmFall 2.2s linear forwards;}
@keyframes gmFall{to{transform:translateY(110vh) rotate(540deg);}}
@media (prefers-reduced-motion:reduce){ .wd-go.bounce, .gm-cele-card, .gm-cf{animation:none;} }
/* phones: the title gets its own line, "About this game" wraps beside the language switch */
@media (max-width:520px){ .bar{gap:8px 14px;} .bar h1{flex:1 1 150px;} .bar .aboutlink{order:6;} }
.gm-goal .gm-conds{color:var(--ink);} .gm-goal .gm-conds b{color:var(--navy);}
/* "In real life" (owner, 2026-10-09): what a step means out in the world.
   The same green as the chat games' real card (.chatbox .msg.t.real in
   lab.css). VonkGames.real(text, slim) builds it. */
.wd-real{background:#E6F4F1; border-left:4px solid #137A6B; color:#0B3B36; border-radius:10px; padding:9px 12px; font-size:14.5px; line-height:1.45;}
.wd-real .wd-real-l{display:block; font:800 10.5px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; color:#137A6B; margin-bottom:5px;}
.wd-real p{margin:0;}
.wd-real.slim{padding:7px 11px; font-size:14px;}

/* the prediction card (VonkGames.predict): gold, so it reads as "your turn
   to guess" and never as a goal (navy) or a real-life note (green) */
.gm-pred{background:#FFF6E0; border-left:4px solid var(--gold); color:var(--ink); border-radius:10px; padding:9px 13px; font-size:14.5px; line-height:1.4;}
.gm-pred p{margin:0;} .gm-pred p + p{margin-top:4px;}
.gm-pred-l{display:block; font:800 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; color:#9A6A00; margin-bottom:6px;}
.gm-pred.open{box-shadow:0 0 0 2px var(--gold);}
.gm-pred-q{font-weight:700; font-size:15.5px;}
.gm-pred-opts{display:flex; flex-wrap:wrap; gap:8px; margin:9px 0 6px;}
.gm-pred-o{font:700 14px/1.25 var(--font-body, inherit); background:#fff; color:var(--navy); border:2px solid var(--gold); border-radius:10px; padding:8px 12px; cursor:pointer; box-shadow:0 2px 0 rgba(242,173,32,.45); text-align:left;}
.gm-pred-o:hover, .gm-pred-o:focus-visible{background:var(--gold); color:var(--navy); outline:none;}
.gm-pred-n{font-size:12.5px; color:var(--muted);}
.gm-pred.right{border-left-color:#137A47; background:#F1FAF5;} .gm-pred.right .gm-pred-l{color:#137A47;}
.gm-pred-why{color:#4A3A10;}