:root{
  --paper:#FBF6E6; --ink:#1F2326; --pencil:#5C5C5C; --stamp:#C8281C; --orange:#F25A1A;
  --olive:#6B7838; --mask:#DAD7C4;
  --sat: env(safe-area-inset-top,0px); --sab: env(safe-area-inset-bottom,0px);
  --sal: env(safe-area-inset-left,0px); --sar: env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--ink);
  font-family:'Oswald',system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.pencil{font-family:'Caveat',cursive;color:var(--pencil);font-weight:400;letter-spacing:0;text-transform:none}
#gl,#hud{position:fixed;left:0;top:0;width:100%;height:100%;display:block}
#hud{pointer-events:none}
#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mask);font-size:13px;letter-spacing:.2em;background:#000;z-index:50}

/* touch controls: matte, dark, semi transparent, live in the black mask */
#touch{position:fixed;inset:0;pointer-events:none;display:none}
#touch.on{display:block}
.tb{position:absolute;pointer-events:auto;border:1px solid rgba(196,194,176,.4);background:rgba(34,35,32,.64);
  color:#CFCDBB;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;border-radius:10px;
  width:46px;height:40px;padding:0;touch-action:none;cursor:pointer}
.tb.round{border-radius:50%;width:62px;height:62px}
.tb.round.sm{width:50px;height:50px;font-size:10px}
.tb.round.big{width:78px;height:78px;font-size:12px}
.tb.active{background:rgba(70,70,62,.8);color:#E8E2D0;border-color:rgba(232,226,208,.5)}
.tb.warn{border-color:var(--orange);color:var(--orange)}
#zoomstep{position:absolute;pointer-events:none;width:46px;height:96px}
#zoomstep .tb{position:absolute;left:0;width:46px;height:44px;font-size:18px}
#zoomstep #b-zin{top:0;border-radius:10px 10px 4px 4px}
#zoomstep #b-zout{top:50px;border-radius:4px 4px 10px 10px}
body.desk #touch .tb{opacity:.8}

/* range card */
#cardwrap{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;overflow-x:hidden;touch-action:pan-y;
  padding:calc(14px + var(--sat)) calc(10px + var(--sar)) calc(24px + var(--sab)) calc(10px + var(--sal));
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    #6B7838;
  transition:transform .45s cubic-bezier(.6,.0,.8,.3), opacity .45s;
}
#cardwrap.down{transform:translateY(110%);pointer-events:none}
#cardwrap.gone{display:none}
#cardwrap.over{background:rgba(20,22,16,.55)}
.card{position:relative;width:min(980px,100%);margin:auto 0;border-radius:9px;padding:18px 22px 20px;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(40,100,140,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,100,140,.13) 1px, transparent 1px),
    linear-gradient(rgba(40,100,140,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,100,140,.06) 1px, transparent 1px);
  background-size:180px 180px, 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.15), inset 0 0 60px rgba(120,100,60,.18);
}
.c-head{border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:10px;display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:4px 16px}
.c-title{font-weight:700;font-size:clamp(20px,3.4vw,30px);letter-spacing:.04em;line-height:1.1}
.c-sub{display:flex;gap:14px;font-size:12px;color:var(--pencil);letter-spacing:.06em}
.c-sub .mono{font-size:11px}
.sec{font-weight:700;font-size:16px;letter-spacing:.14em;margin:14px 0 4px;display:flex;align-items:baseline;gap:12px;
  border-bottom:1px solid rgba(31,35,38,.5);padding-bottom:3px}
.sec .pencil{font-size:19px}
.c-opts{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-end}
.opt .lbl{font-size:11px;letter-spacing:.16em;color:var(--pencil);margin-bottom:3px}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden}
.seg button,.chk{font-family:'Oswald',sans-serif;font-weight:500;font-size:13px;letter-spacing:.08em;
  background:transparent;border:0;color:var(--ink);padding:7px 11px;cursor:pointer;position:relative}
.seg button+button{border-left:1.5px solid var(--ink)}
.seg button.on{background:var(--ink);color:var(--paper)}
.chk{border:1.5px solid var(--ink);border-radius:4px;min-width:64px}
.chk.on{background:var(--ink);color:var(--paper)}

.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:54px minmax(140px,1.6fr) 88px 92px 96px minmax(120px,1.3fr);
  align-items:center;gap:8px;padding:8px 6px 9px;border-bottom:1px dashed rgba(31,35,38,.28);cursor:pointer;position:relative}
.row:hover{background:rgba(31,35,38,.035)}
.row .n{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500}
.row .nm{font-weight:500;font-size:17px;letter-spacing:.03em;line-height:1.1}
.row .nm small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--pencil);margin-top:2px}
.row .d,.row .w,.row .b{font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.row .b{font-weight:500}
.row .pn{font-family:'Caveat',cursive;font-size:19px;color:var(--pencil);line-height:1}
.row .k{display:none}
.row.sel::after{content:"";position:absolute;left:4px;right:8px;bottom:2px;height:7px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C60 3 120 8 190 5 S320 3 398 6' stroke='%23E2561F' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 8 C90 6 200 9 300 7 S370 6 392 8' stroke='%23E2561F' stroke-width='1.2' fill='none' opacity='.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%}
.row.sel .n{color:var(--orange)}
.hdr{cursor:default;padding-top:2px;padding-bottom:2px;border-bottom:1px solid rgba(31,35,38,.4)}
.hdr:hover{background:none}
.hdr div{font-size:10.5px;letter-spacing:.14em;color:var(--pencil);font-family:'Oswald',sans-serif;font-weight:500}

.rstamp{position:absolute;right:16%;top:50%;font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;letter-spacing:.12em;
  color:var(--stamp);border:2.5px solid var(--stamp);border-radius:4px;padding:0 8px;line-height:1.35;pointer-events:none;
  opacity:.82;mix-blend-mode:multiply;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/%3E%3C/filter%3E%3Crect width='120' height='40' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/%3E%3C/filter%3E%3Crect width='120' height='40' filter='url(%23n)'/%3E%3C/svg%3E")}

.c-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.legend{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink);line-height:1.65;max-width:640px}
.legend b{font-weight:500;border:1px solid rgba(31,35,38,.5);border-radius:3px;padding:0 4px;margin-right:3px;white-space:nowrap}
.legend span{white-space:nowrap;margin-right:12px;display:inline-block}
.go{font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;letter-spacing:.16em;background:var(--ink);color:var(--paper);
  border:0;border-radius:5px;padding:12px 30px;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.go:active{transform:translateY(1px)}
.go.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.board{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px}
.board .bt{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.16em;color:var(--pencil)}
.board a{color:var(--ink)}
.board .mine{color:var(--orange)}

#results{position:relative}
.r-grid{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-top:6px}
.r-lines{flex:1;min-width:220px}
.r-line{display:flex;align-items:baseline;gap:10px;border-bottom:1px dashed rgba(31,35,38,.3);padding:7px 0}
.r-line .k{font-size:13px;letter-spacing:.14em;width:120px;color:var(--pencil)}
.r-line .v{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:500}
.r-line .h{font-family:'Caveat',cursive;font-size:20px;color:var(--pencil)}
#r-paper{width:150px;height:180px;border:1px solid rgba(31,35,38,.3);transform:rotate(1.5deg);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.r-note{font-size:24px;margin-top:10px;min-height:28px}
.stamp{position:absolute;right:6%;top:46px;font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(26px,5vw,40px);letter-spacing:.12em;
  color:var(--stamp);border:4px solid var(--stamp);border-radius:6px;padding:0 14px;line-height:1.3;opacity:0;pointer-events:none;
  mix-blend-mode:multiply;transform:rotate(-8deg) scale(2.2);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.7'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.7'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23n)'/%3E%3C/svg%3E")}
.stamp.drop{animation:thud .42s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes thud{0%{opacity:0;transform:rotate(var(--rot,-8deg)) scale(2.4)}55%{opacity:.9;transform:rotate(var(--rot,-8deg)) scale(.94)}100%{opacity:.86;transform:rotate(var(--rot,-8deg)) scale(1)}}
.card.shake{animation:cshake .25s}
@keyframes cshake{0%,100%{transform:none}30%{transform:translate(1px,2px)}60%{transform:translate(-1px,-1px)}}

/* narrow screens: rows fold into two lines */
@media (max-width:720px){
  .card{padding:14px 13px 16px}
  .row{grid-template-columns:40px 1fr auto;grid-template-areas:"n nm b" "n meta meta" "n pn pn";gap:2px 8px;padding:9px 4px 10px}
  .row .n{grid-area:n;align-self:start;padding-top:3px}
  .row .nm{grid-area:nm}
  .row .b{grid-area:b;text-align:right}
  .row .d,.row .w{display:none}
  .row .k{display:block;grid-area:meta;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink)}
  .row .pn{grid-area:pn;font-size:18px}
  .hdr{display:none}
  .rstamp{right:8px;top:30%;font-size:15px}
  .go{flex:1;padding:12px 16px}
  .legend{font-size:11px}
}