@font-face{font-family:Rodeo;src:url('../assets/bricolage-800.ttf')}@font-face{font-family:Text;src:url('../assets/dm-sans-400.ttf')}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#17171d;color:#e9e5d9;font:15px/1.5 Text,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #efd278;outline-offset:3px}.top{display:flex;align-items:center;justify-content:space-between;padding:12px max(17px,env(safe-area-inset-right));background:#23212b;position:relative;z-index:5;gap:10px}.brand{font:800 24px Rodeo,sans-serif;letter-spacing:-.06em;text-decoration:none}.brand span{color:#f0a057}.top>div{display:flex;align-items:center;gap:10px}.top button{color:#e0d9e7;border:1px solid #686172;border-radius:8px;width:34px;height:32px;background:linear-gradient(#4d4659,#302b3a);box-shadow:inset 0 1px #ffffff25,0 2px #0a090e}.connection{font-size:10px;color:#9baf9b}.connection.offline{color:#e3ae7a}#play{min-height:calc(100svh - 90px);position:relative;display:grid;place-items:center;padding:10px}.pad{position:relative;max-width:1200px;width:min(100%,calc((100svh - 110px)*2.15));aspect-ratio:2.15;border-radius:20px;overflow:hidden;touch-action:none;user-select:none;background:#0c0c11;box-shadow:0 16px 45px #0008;isolation:isolate}.pad>img{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}.hit{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);transform:translate(-50%,-50%);border:0;background:transparent;padding:0;border-radius:50%;z-index:3;touch-action:none}.hit.shoulder,.hit.menu{border-radius:30px}.hit.dpad{border-radius:7px}.hit:after{content:'';position:absolute;inset:0;border-radius:inherit;transition:background .06s,box-shadow .06s;pointer-events:none}.hit.pressed:after{background:#0003;box-shadow:inset 0 4px 8px #0008,0 0 0 2px #ffffff66}.pad:not([data-skin=classic]) .hit.pressed:after{box-shadow:inset 0 5px 10px #0008,0 0 18px #b9ddff88}.cap-label{position:absolute;inset:22%;display:grid;place-items:center;border-radius:50%;color:#f4f1e5;font:bold clamp(16px,3.5vw,48px) Arial,sans-serif;text-shadow:0 2px 2px #0004;pointer-events:none}.blank-cap{background:linear-gradient(140deg,#bfc4bc,#848f85);border:1px solid #626e61;box-shadow:inset 0 2px 2px #fff7,0 3px 2px #0005;pointer-events:none;z-index:4}.stick{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);transform:translate(-50%,-50%);background:radial-gradient(circle at 45% 35%,#606574,#191e29 80%);border-radius:50%;box-shadow:inset 0 7px 15px #0009,0 0 0 2px #c2c7d34d;z-index:4;display:grid;place-items:center;touch-action:none}.stick span{width:64%;height:64%;border-radius:50%;background:radial-gradient(circle at 40% 30%,#f4efde,#c2c0b6 75%,#92948e);box-shadow:inset 0 2px 2px #fff9,0 6px 8px #0007;transition:transform .06s;pointer-events:none}.stick span:after{content:'';position:absolute;inset:13%;border:1px solid #8d8e7e55;border-radius:50%}.status-plate{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);transform:translate(-50%,-50%);z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font:700 clamp(8px,1.2vw,16px) monospace;letter-spacing:.04em;color:#263a26;background:#c2c5bbcc;border-radius:5px;pointer-events:none}.pad[data-skin=indigo] .status-plate{background:#140b23;color:#eac48c}.pad[data-skin=crystal] .status-plate{background:#062230;color:#8de1de}.pad[data-skin=afterglow] .status-plate{background:#0d1012;color:#8aef9a}.status-plate small{display:block;font-size:.7em;font-weight:400;opacity:.7;margin-top:4px}.fx{position:absolute;inset:0;pointer-events:none;z-index:2}.pad[data-skin=indigo].animate .fx{left:27%;right:27%;top:20%;bottom:29%;border-radius:8%;background:linear-gradient(transparent 35%,#e0b6ff15 48%,transparent 60%);background-size:100% 230%;animation:sweep 7s linear infinite}.pad[data-skin=crystal].animate .fx{background:linear-gradient(110deg,transparent 25%,#d8f7ff30 45%,transparent 60%);background-size:240% 100%;animation:shine 9s ease-in-out infinite;mix-blend-mode:screen}.pad[data-skin=afterglow].animate .fx{inset:2%;border-radius:13% / 28%;box-shadow:inset 0 0 15px #6be8ff77;animation:glow 5s ease-in-out infinite}.status-line{font:10px monospace;text-align:center;padding:8px;color:#8eaa92;min-height:28px}.entry{position:fixed;inset:0;z-index:10;background:#17171df7;overflow:auto;padding:25px 16px;display:grid;place-items:center}.entry[hidden],.pad[hidden],.private-view[hidden],[hidden]{display:none!important}.entry-shell{width:100%;max-width:390px;padding:27px;background:linear-gradient(#d7dbd1,#b9c0b0);border:3px solid #edf0e7;border-bottom-color:#7e8874;border-right-color:#8c957f;border-radius:25px;color:#2c382a;box-shadow:0 16px 45px #0007}.entry-shell h1{font:800 34px/1.1 Rodeo,sans-serif;margin:23px 0 13px;letter-spacing:-.04em}.entry-shell p{font-size:13px;color:#52604b}.entry-shell label,dialog label{display:block;font-size:12px;margin:17px 0 9px}.entry-shell input,dialog select{width:100%;background:#e9eddf;border:1px solid #879679;border-radius:7px;padding:12px;color:#34452a;box-shadow:inset 0 2px 4px #46503620;margin-top:5px}.hardware{display:block;width:100%;border:1px solid #7a876d;border-radius:8px;background:linear-gradient(#d6ddca,#a4b397);box-shadow:inset 0 1px #fff8,0 3px #6f7d63;color:#2e3e25;padding:12px 15px;font-size:13px;font-weight:700;margin-top:15px}.hardware.primary{background:linear-gradient(#5c7150,#3d5432);color:#f2f4e5;border-color:#34472c;box-shadow:inset 0 1px #a3b394,0 3px #263820}.note{font-size:11px!important;line-height:1.5}.message{font-size:12px;min-height:20px}.message.error{color:#9e3124}#camera-area{position:relative;aspect-ratio:1;background:#101a16;border-radius:12px;margin-top:20px;overflow:hidden}#camera{width:100%;height:100%;object-fit:cover}.scan-frame{position:absolute;inset:18%;border:3px solid #d4f1af;border-radius:15px;box-shadow:0 0 0 100px #0003;pointer-events:none}dialog{max-width:390px;width:calc(100% - 32px);border:4px solid #b9b4c0;border-top-color:#eee9f4;border-left-color:#e3dce9;border-radius:22px;background:linear-gradient(#d1cbd7,#a6a0af);color:#332b3b;padding:25px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#000b}dialog h2{font:800 26px Rodeo,sans-serif;margin:0}dialog select{background:#ece5f1;color:#493a56;border-color:#9c8ba8}.check{display:flex;gap:9px;align-items:center}.quiet{display:block;border:0;background:none;text-decoration:underline;margin:20px auto 0;color:#5d3d4b;font-size:12px}.private-view{width:min(100%,680px);padding:22px;background:linear-gradient(#5a526b,#383143);border:4px solid #8f83a0;border-bottom-color:#25202e;border-radius:24px;box-shadow:0 15px 40px #0005}.private-view h1{font:800 27px Rodeo,sans-serif;letter-spacing:-.03em;margin:0 0 15px}.lcd{padding:23px;background:#151b20;color:#d4e8b2;border:5px solid #252d33;border-radius:14px;box-shadow:inset 0 0 25px #0008;font-family:monospace}.lcd h2{font:700 31px monospace;margin:12px 0}.lcd p{font-size:13px;line-height:1.6}.role-hidden .secret-text{filter:blur(11px);user-select:none}.view-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.view-button{border:1px solid #76876d;border-radius:9px;padding:14px;background:linear-gradient(#bbc7aa,#91a17e);color:#283621;box-shadow:0 3px #4f6041,inset 0 1px #e6e9cf;font:600 13px Text,sans-serif;min-height:48px}.view-button:active,.view-button.selected{transform:translateY(2px);box-shadow:0 1px #4f6041;background:#d2c581}.view-button:disabled{opacity:.55}.view-button.wide{width:100%;margin-top:15px}.draw-canvas{width:100%;aspect-ratio:1.5;background:#f4ead5;border:5px solid #3d3544;border-radius:12px;touch-action:none;display:block}.draw-tools{display:flex;gap:9px;align-items:center;margin:12px 0}.color-button{width:30px;height:30px;border-radius:50%;border:2px solid #d7cfe0}.guess-form{display:flex;gap:10px;margin-top:17px}.guess-form input{min-width:0;flex:1;background:#e0e7cf;border:1px solid #7b896e;border-radius:7px;padding:12px;color:#24361c}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.dials{display:flex;gap:9px;margin:18px 0}.dial{flex:1;background:#0c1516;color:#d5eeb7;border:2px solid #495b4c;border-radius:8px;padding:12px 0;font:30px monospace;text-align:center}.dial.selected{border-color:#f0cc6e}.glyph-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.glyph{background:#253330;border:1px solid #4d6657;padding:9px 12px;border-radius:5px;font:12px monospace}.private-status{font-size:11px;color:#b4d09a;margin-top:12px}.rotate-hint{font-size:14px;text-align:center;color:#d0c5db;max-width:260px;position:absolute;bottom:25px;left:50%;transform:translateX(-50%)}@keyframes sweep{from{background-position:0 150%}to{background-position:0 -150%}}@keyframes shine{0%,20%{background-position:150% 0}80%,100%{background-position:-130% 0}}@keyframes glow{50%{box-shadow:inset 0 0 28px #ba72f1aa}}@media(orientation:landscape) and (max-height:600px){.top{position:absolute;top:0;left:0;right:0;background:transparent;padding:7px 18px;pointer-events:none}.top .brand{font-size:15px;opacity:.6}.top>div{pointer-events:auto}.top .connection{display:none}#play{height:100svh;min-height:0;padding:0}.pad{width:min(100vw,calc(100svh*2.15));max-width:none;border-radius:0}.status-line{position:fixed;bottom:3px;left:40%;right:40%;font-size:8px;padding:0;z-index:8;background:#161b16aa;border-radius:4px}.private-view{height:100svh;overflow:auto;width:min(800px,100%);padding:16px}.top:has(+ #play .private-view:not([hidden])){position:relative;background:#23212b}}@media(orientation:portrait){.pad{width:100%;}.private-view{margin:15px 0}.rotate-hint{display:block}#play{align-items:start;padding-top:60px}.entry{padding-top:35px}}@media(prefers-reduced-motion:reduce){.fx,.hit:after,.stick span{animation:none!important;transition:none!important}}

.trackpad{height:240px;display:grid;place-items:center;color:#a9b4a0;background:radial-gradient(ellipse at 45% 20%,#3e4c43,#1b2622);border:3px solid #151e1b;border-radius:19px;box-shadow:inset 0 5px 16px #0006;touch-action:none;user-select:none;font:12px monospace}.trackpad:active{border-color:#9cba88}

.layout-toggle{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);transform:translate(-50%,-50%);z-index:7;border:1px solid #77786e;border-radius:50px;background:linear-gradient(#b9b9b1,#a6a79e);box-shadow:inset 0 2px 3px #e8e9de,0 1px 2px #25272180;display:flex;align-items:center;justify-content:space-around;padding:0 2%;gap:5px;color:#30342e;font:bold clamp(8px,1.7vw,23px) Arial,sans-serif}.layout-toggle i{position:relative;height:70%;flex:0 0 37%;border-radius:30px;background:#343632;box-shadow:inset 0 2px 5px #111}.layout-toggle b{position:absolute;right:4%;top:7%;width:48%;height:86%;border-radius:30px;background:linear-gradient(#e2e2d9,#a6a89f);box-shadow:inset 0 1px #fff9,0 2px 4px #111a}.layout-toggle.two b{right:48%}

.pad[data-skin="indigo"] .face[data-control="face.north"] .cap-label,.pad[data-skin="indigo"] .face[data-control="face.west"] .cap-label,.pad[data-skin="classic"] .face[data-control="face.south"] .cap-label,.pad[data-skin="classic_dual"] .face[data-control="face.south"] .cap-label,.pad[data-skin="crystal"] .face[data-control="face.south"] .cap-label{color:#291f2e;text-shadow:0 1px 0 #ffffff44}

/* Physical caps remain part of the shell at rest; reuse the same texture in motion. */
.stick.textured{background:transparent;box-shadow:none}.stick.textured:before{content:"";position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,#0a0a0a,#303030);opacity:0}.stick.textured span{position:relative;width:68%;height:68%;background-repeat:no-repeat;box-shadow:none;opacity:0;transition:none}.stick.textured span:after{display:none}.stick.textured.deflected:before,.stick.textured.deflected span{opacity:1}
/* Private screens as the same gray handheld as the Classic pad: plastic body,
   dot-matrix LCD in a dark bezel, chunky press buttons. */
.private-view{background:linear-gradient(160deg,#dedad1,#c2bdb2 55%,#aca79c);border:0;border-radius:22px 22px 64px 22px;box-shadow:inset 0 2px #fffc,inset 0 -6px 12px #0003,0 18px 40px #000a;color:#2f2d36;padding:20px 20px 28px}
.private-view h1{color:#3a3842;font-size:22px;letter-spacing:-.02em;text-shadow:0 1px #fff9;margin:2px 4px 14px}
.private-view .lcd{position:relative;background:#a9b98c;color:#1f2a19;border:0;border-radius:10px;padding:20px 18px;margin:0;box-shadow:0 0 0 12px #3d3b48,0 0 0 14px #2a2833,inset 0 2px 10px #0006;background-image:radial-gradient(#0000 55%,#00000014 56%);background-size:4px 4px;font-family:ui-monospace,Menlo,monospace}
.private-view .lcd::before{content:"";position:absolute;left:-8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#e2483b;box-shadow:0 0 6px #ff6a50}
.private-view .lcd h2{color:#1b2615;font:800 30px/1.1 ui-monospace,Menlo,monospace;letter-spacing:.02em;margin:8px 0}
.private-view .lcd small{color:#3d4a31;font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.12em}
.private-view .lcd p{color:#24301d;font-size:14px;margin:6px 0 0}
.private-view > p{color:#4a4753;font-size:14px;margin:22px 4px 0}
.private-view .lcd + *{margin-top:26px}
.private-view .view-choices{gap:12px;margin-top:22px}
.private-view .view-button{border:0;border-radius:14px;min-height:54px;font:700 15px Text,system-ui,sans-serif;color:#f7eef5;background:linear-gradient(#a3305f,#7d2047);box-shadow:inset 0 2px #ffffff40,0 5px #4a1028,0 7px 10px #0004}
.private-view .view-button:active,.private-view .view-button.selected{transform:translateY(4px);box-shadow:inset 0 2px #ffffff30,0 1px #4a1028}
.private-view .view-button.wide{background:linear-gradient(#5d6f55,#435339);box-shadow:inset 0 2px #ffffff35,0 5px #26321f,0 7px 10px #0004;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.private-view .view-button:disabled{opacity:.45}
.private-view .private-status{color:#3f5a33;font-weight:600;font-size:13px}
/* Landscape gamepad: the skin already shows the name, so the header buttons sit at the
   top center between the shoulder buttons instead of on top of them. */
@media(orientation:landscape) and (max-height:600px){
  .top:not(:has(+ #play .private-view:not([hidden]))){justify-content:center}
  .top:not(:has(+ #play .private-view:not([hidden]))) .brand{display:none}
  .top:not(:has(+ #play .private-view:not([hidden]))) button{width:30px;height:26px;opacity:.85}
}
/* Entry screen as the same gray handheld as the private screens and the website. */
@font-face{font-family:Pixel;src:url('/sdk/assets/Silkscreen-Bold.ttf');font-weight:700}
.entry-shell{background:linear-gradient(160deg,#dedad1,#c2bdb2 55%,#aca79c);border:0;border-radius:22px 22px 64px 22px;color:#2f2d36;box-shadow:inset 0 2px #fffc,inset 0 -6px 12px #0003,0 18px 40px #000a}
.entry-shell h1{color:#2f2d36;text-shadow:0 1px #fff9}
.entry-shell p{color:#4a4753}
.entry-shell .brand span{color:#d33a3a}
.entry-shell input{background:#f2f0ea;border:0;border-radius:10px;color:#2f2d36;box-shadow:inset 0 2px 5px #0002}
.hardware{border:0;border-radius:14px;min-height:50px;font-size:15px;background:linear-gradient(#ebe8df,#d7d3c8);color:#2f2d36;box-shadow:inset 0 1px #fff,0 4px #b3aea2}
.hardware.primary{background:linear-gradient(#d33a3a,#b82e31);color:#fff;box-shadow:inset 0 1px #ffffff40,0 4px #9e2328}
.hardware:active{transform:translateY(3px);box-shadow:inset 0 1px #fff,0 1px #b3aea2}
/* A controller, not a document: no text selection, long-press menus, image drags, tap
   flashes, double-tap zoom or pull-to-refresh anywhere except the text fields. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, svg, canvas, video { -webkit-user-drag: none; user-drag: none; }
button, a, select, label { touch-action: manipulation; }
#play, .pad, .pad * { touch-action: none; }
.private-view { touch-action: pan-y; }
.entry-about{display:block;margin-top:18px;text-align:center;font-size:13px;color:#4a4753}
/* LCD status sized by the pad itself and styled like the printed screen; messages and hints
   scroll through it instead of covering the controller. */
.pad { container-type: size; }
.status-plate { background: #1f2b1d; color: #c7e39b; font: 700 4.4cqh/1.15 Pixel, ui-monospace, monospace; letter-spacing: .04em; border-radius: 1.4cqh; box-shadow: inset 0 0 0 .35cqh #0c120b, inset 0 .8cqh 2.4cqh #000c; text-shadow: 0 0 1cqh #c7e39b66; overflow: hidden; white-space: nowrap; padding: 0 1.4cqw; text-transform: uppercase; }
.status-plate > span { display: block; max-width: 100%; overflow: hidden; }
.status-plate > span > i { display: inline-block; font-style: normal; }
.status-plate small { font-size: .74em; color: #8eaa6c; margin-top: .5cqh; opacity: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* The old bottom status bar stays only for screen readers. */
.status-line { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Header buttons: one small pill at the top center, clear of the logo. */
@media (orientation: landscape) and (max-height: 600px) {
  .top { padding-top: max(3px, env(safe-area-inset-top)); }
  .top:not(:has(+ #play .private-view:not([hidden]))) > div { gap: 0; padding: 2px; border-radius: 999px; background: #1b1a20d9; box-shadow: 0 1px 0 #ffffff1f, 0 2px 8px #0007; }
  .top:not(:has(+ #play .private-view:not([hidden]))) button { width: 30px; height: 20px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; font-size: 12px; line-height: 1; color: #e6e1d6; opacity: 1; padding: 0; }
  .top:not(:has(+ #play .private-view:not([hidden]))) button:active { background: #ffffff22; }
}
/* Short landscape screens (phone browsers with toolbars): compact private screens. */
@media (orientation: landscape) and (max-height: 430px) {
  .private-view { padding: 10px 14px 14px; margin: 6px 0; border-radius: 18px 18px 40px 18px; }
  .private-view h1 { font-size: 17px; margin: 0 4px 8px; }
  .private-view .lcd { padding: 10px 14px; box-shadow: 0 0 0 8px #3d3b48, 0 0 0 10px #2a2833, inset 0 2px 10px #0006; }
  .private-view .lcd h2 { font-size: 20px; margin: 2px 0; }
  .private-view .lcd p { font-size: 12px; margin: 2px 0 0; }
  .private-view .lcd + * { margin-top: 16px; }
  .private-view .view-choices { margin-top: 12px; gap: 8px; }
  .private-view .view-button { min-height: 42px; }
  .private-view > p { margin: 12px 4px 0; font-size: 12px; }
}
.private-view .lcd h2 { font-family: Pixel, ui-monospace, monospace; letter-spacing: .04em; }
/* Turned gamepad (see applyTurn in controller.mjs): the header and play area rotate together and
   swap width and height so the landscape controller fills a portrait screen. */
#turn { position: relative; }
html[data-turn="90"] body, html[data-turn="-90"] body { overflow: hidden; height: 100dvh; }
html[data-turn="90"] #turn, html[data-turn="-90"] #turn { position: fixed; top: 0; left: 0; width: 100dvh; height: 100vw; transform-origin: 0 0; }
html[data-turn="90"] #turn { transform: translateX(100vw) rotate(90deg); }
html[data-turn="-90"] #turn { transform: translateY(100dvh) rotate(-90deg); }
html[data-turn="90"] #turn .top, html[data-turn="-90"] #turn .top { position: absolute; top: 0; left: 0; right: 0; background: transparent; padding: 3px 18px; pointer-events: none; justify-content: center; }
html[data-turn="90"] #turn .top .brand, html[data-turn="-90"] #turn .top .brand, html[data-turn] #turn .top .connection { display: none; }
html[data-turn="90"] #turn .top > div, html[data-turn="-90"] #turn .top > div { pointer-events: auto; gap: 0; padding: 2px; border-radius: 999px; background: #1b1a20d9; box-shadow: 0 1px 0 #ffffff1f, 0 2px 8px #0007; }
html[data-turn="90"] #turn .top button, html[data-turn="-90"] #turn .top button { width: 30px; height: 20px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; font-size: 12px; color: #e6e1d6; padding: 0; }
html[data-turn="90"] #play, html[data-turn="-90"] #play { height: 100vw; min-height: 0; padding: 0; display: grid; place-items: center; }
html[data-turn="90"] .pad, html[data-turn="-90"] .pad { width: min(100dvh, calc(100vw * 2.15)); max-width: none; border-radius: 0; }
#flip-button { display: none; }
html[data-turn="90"] #flip-button, html[data-turn="-90"] #flip-button { display: inline-block; }