* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #03202e;
  color: #eafff2;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background .6s;
}
canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
[hidden] { display: none !important; }

button {
  font: inherit; color: inherit; background: transparent;
  border: 2px solid currentColor; padding: .7em 1.6em; min-width: 11em;
  letter-spacing: .2em; cursor: pointer; opacity: .85;
}
button:active { opacity: 1; transform: translateY(1px); }

#title {
  position: fixed; left: 0; right: 0; bottom: 22%;
  display: flex; justify-content: center;
}
#title button { background: rgba(0, 0, 0, .25); }

#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .9s; }
#fade.on { opacity: 1; }

.small { font-size: 12px; opacity: .65; }

#title {
  flex-direction: column; align-items: center; gap: 14px;
}
#from { font-size: 14px; letter-spacing: .1em; opacity: .85; }

#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash .35s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

#toast {
  position: fixed; left: 0; right: 0; top: 9%;
  text-align: center; pointer-events: none; transition: opacity .5s, transform .5s;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
#toast.out { opacity: 0; transform: translateY(-8px); }
#t-name { font-size: 20px; font-weight: 700; letter-spacing: .08em; border-bottom: 2px solid var(--rc, #888); padding: 0 .3em; }
#t-new { margin-left: .5em; font-size: 11px; color: #111; background: var(--rc, #ffc94a); padding: 1px 5px; vertical-align: 4px; }

.panel {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .9);
  display: flex; align-items: center; justify-content: center; overflow-y: auto;
}
.panel .box { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 12px; max-height: 100%; }
.panel .big { font-size: 26px; font-weight: 700; letter-spacing: .05em; }
.panel .primary { background: rgba(255, 255, 255, .1); }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.row button { min-width: 9em; }

#sheet { width: min(92vw, calc((100vh - 190px) * .8)); height: auto; image-rendering: pixelated; }
#one-c { width: min(72vw, calc((100vh - 280px) * .75)); height: auto; image-rendering: pixelated; border: 3px solid var(--rc, #888); }
#one-name { border-bottom: 2px solid var(--rc, #888); }

#zukan .box { justify-content: flex-start; width: 100%; max-width: 420px; }
#z-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.cell {
  min-width: 0; padding: 4px; border: 2px solid var(--rc, #666); opacity: 1; background: #0c0d0f;
  display: flex; flex-direction: column; align-items: center; gap: 4px; letter-spacing: 0; font-size: 11px;
}
.cell canvas { width: 100%; height: auto; image-rendering: pixelated; }
.cell.none { opacity: .5; }
.cell.none i { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; font-style: normal; font-size: 22px; background: rgba(255, 255, 255, .04); }