/* Falling Sand — material sandbox. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");

:root{ --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html,body{
  -webkit-tap-highlight-color: transparent; height:100%; }
body{
  margin:0; font-family:var(--font); color:#efe7da;
  overflow:hidden; overscroll-behavior:none; background:#0c0a07;
}

.sand{ position:fixed; inset:0; z-index:1; width:100%; height:100%; touch-action:none; cursor:crosshair; display:block; image-rendering:pixelated; }

/* ---- toolbar ---- */
.toolbar{
  position:fixed; left:50%; top:clamp(52px,8.5vh,92px); bottom:auto; transform:translateX(-50%);
  z-index:4; display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  max-width:min(96vw,780px); padding:7px 11px; border-radius:16px;
  background:rgba(20,16,11,0.62); border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 12px 34px rgba(0,0,0,0.45); backdrop-filter:blur(12px);
}
.mats{ display:inline-flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.mat{
  appearance:none; cursor:pointer; font-family:var(--font); font-size:.66rem; font-weight:600;
  display:inline-flex; align-items:center; gap:5px; padding:5px 9px 5px 7px; border-radius:9px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:#efe7da;
  transition:border-color .14s ease, background .14s ease, transform .08s ease;
}
.mat:hover{ background:rgba(255,255,255,0.1); }
.mat:active{ transform:translateY(1px); }
.mat__sw{ width:11px; height:11px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25); }
.mat.is-active{ border-color:#fff; background:rgba(255,255,255,0.16); box-shadow:0 0 0 1px rgba(255,255,255,0.25); }
.mat:focus-visible{ outline:none; box-shadow:0 0 0 2px #0c0a07,0 0 0 4px rgba(255,255,255,0.6); }

.size{ display:inline-flex; align-items:center; gap:7px; font-size:.68rem; font-weight:600; color:rgba(239,231,218,0.7); }
.size__k{ letter-spacing:.12em; text-transform:uppercase; color:rgba(239,231,218,0.5); }
.size input[type=range]{ width:clamp(64px,14vw,110px); accent-color:#d8b25a; }

.tbtn{
  appearance:none; font-family:var(--font); font-size:.74rem; font-weight:600; cursor:pointer;
  padding:8px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); color:#efe7da;
  transition:border-color .14s ease, background .14s ease;
}
.tbtn:hover{ border-color:rgba(255,160,120,0.55); background:rgba(255,140,90,0.14); }
.tbtn:focus-visible{ outline:none; box-shadow:0 0 0 2px #0c0a07,0 0 0 4px rgba(255,160,120,0.7); }

/* ---- frame / hint ---- */
.frame{ position:fixed; inset:0; z-index:5; pointer-events:none; }
.frame__corner{ position:absolute; font-size:clamp(.56rem,1.2vw,.7rem); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(239,231,218,0.5); white-space:nowrap; text-shadow:0 1px 4px rgba(0,0,0,0.6); }
.frame__corner--tl{ top:clamp(16px,3vw,30px); left:clamp(16px,3vw,30px); }
.frame__corner--tr{ top:clamp(16px,3vw,30px); right:clamp(16px,3vw,30px); }
.frame__corner--bl{ bottom:clamp(16px,3vw,30px); left:clamp(16px,3vw,30px); }
.frame__corner a{ color:inherit; text-decoration:none; pointer-events:auto; border-bottom:1px solid transparent; transition:color .14s ease,border-color .14s ease; }
.frame__corner a:hover{ color:#fff; border-bottom-color:#e0a96b; }

.hint{ position:fixed; left:50%; bottom:clamp(46px,9vw,64px); transform:translateX(-50%); margin:0; z-index:4; max-width:74vw; font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(239,231,218,0.42); pointer-events:none; transition:opacity .6s ease; text-align:center; padding:0 12px; text-shadow:0 1px 4px rgba(0,0,0,0.6); }
.hint.is-hidden{ opacity:0; }