*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#06090a}
body{font-family:'IBM Plex Mono',ui-monospace,monospace;color:#c9d3d1;min-height:100vh}
a{color:var(--a);text-decoration:none}
a:hover{color:#ffd48a}
::selection{background:rgba(255,182,46,.3)}
button,input{font-family:'IBM Plex Mono',ui-monospace,monospace}
input{outline:none}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* ---- palette: cambia qui i tre temi, o clicca i pallini nel gioco ---- */
body{ --a:#ffb62e; --ad:#8a7a55; --a2:#4fd6e8; }
body[data-theme="ambra"]{ --a:#ffb62e; --ad:#8a7a55; --a2:#4fd6e8; }
body[data-theme="verde"]{ --a:#5cf08a; --ad:#4d8a63; --a2:#e0c15a; }
body[data-theme="ghiaccio"]{ --a:#8fd8ff; --ad:#5a7a8a; --a2:#ffb62e; }

@keyframes cifBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes cifScan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes cifFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cifPulse{0%,100%{opacity:.35}50%{opacity:1}}

#app{min-height:100vh;background:radial-gradient(120% 90% at 50% 0%, #0d1516 0%, #06090a 60%);position:relative;overflow-x:hidden}
.scan-a{position:fixed;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px, rgba(0,0,0,.22) 4px);mix-blend-mode:multiply}
.scan-b{position:fixed;inset:0;pointer-events:none;z-index:61;overflow:hidden}
.scan-b i{position:absolute;left:0;right:0;height:38vh;background:linear-gradient(to bottom, rgba(255,182,46,0), rgba(255,182,46,.035), rgba(255,182,46,0));animation:cifScan 7s linear infinite;display:block}
.scan-c{position:fixed;inset:0;pointer-events:none;z-index:59;box-shadow:inset 0 0 220px rgba(0,0,0,.85)}

@media (prefers-reduced-motion: reduce){
  .scan-b i{animation:none;display:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.btn{font-family:inherit;transition:box-shadow .2s,transform .1s,border-color .2s,color .2s,background .2s}
.btn-primary{background:var(--a);color:#0a0d0c;border:none;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.btn-primary:hover:not(:disabled){box-shadow:0 0 34px rgba(255,182,46,.45)}
.btn-primary:active:not(:disabled){transform:translateY(1px)}
.btn-primary:disabled{background:rgba(255,182,46,.18);color:#4d5856}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.14);color:#7d8a88;letter-spacing:.2em;text-transform:uppercase}
.btn-ghost:hover:not(:disabled){color:#c9d3d1;border-color:rgba(255,255,255,.3)}
.btn-dark{background:linear-gradient(180deg,#4a4a45,#2a2a26);border:1px solid #5c5c54;border-radius:4px;color:#cfd6cf;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #171714}
.btn-dark:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.field{width:100%;background:rgba(0,0,0,.45);border:1px solid rgba(255,182,46,.3);color:var(--a);font-size:15px;padding:10px 12px}
.field:focus{border-color:var(--a);box-shadow:0 0 0 1px rgba(255,182,46,.35), 0 0 22px rgba(255,182,46,.12)}
.label{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ad);margin-bottom:8px}
.glow{text-shadow:0 0 26px rgba(255,182,46,.35)}
.theme-dot{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.2);cursor:pointer;display:inline-block;transition:border-color .2s,transform .15s}
.theme-dot.active{border-color:#fff;transform:scale(1.12)}

/* ---- barra del rewind ---- */
.rewind{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.rewind button{flex:0 0 auto;min-width:60px;padding:9px 10px;border-radius:3px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}

/* ---- adattamento a schermi piccoli (serve !important: molti stili sono inline) ---- */
@media (max-width: 900px){
  .topbar{flex-wrap:wrap !important;gap:10px 16px !important;padding:10px 14px !important}
  .topbar > div{gap:14px !important}
  .main{padding:22px 16px 60px !important}
  .ferry-grid{grid-template-columns:1fr !important}
  .ferry-water{min-height:74px !important}
  .clue-grid{grid-template-columns:1fr !important}
  .note-row{min-width:430px !important}
  .totem-cell{width:52px !important;height:46px !important;font-size:19px !important}
}
@media (max-width: 560px){
  .digit-cell{width:38px !important;height:50px !important;font-size:19px !important}
  .totem-cell{width:42px !important;height:42px !important;font-size:17px !important}
  .beam{width:290px !important}
  .houses{gap:5px !important}
  .weights button{width:40px !important;height:40px !important}
}