/* A published game page on app.playnuthouse.com: the same look as an exported .html game. */
html, body { margin: 0; height: 100%; background: #111; overflow: hidden; overscroll-behavior: none; }
body { display: grid; place-items: center; font: 20px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; touch-action: manipulation; position: relative; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; outline: none; background: #000; }
#overlay {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 20;
  background: rgb(0 0 0 / 0.55); color: #fff; font-size: 28px; font-weight: 700; cursor: pointer;
  text-shadow: 0 2px 8px #000; user-select: none;
}
#overlay[hidden] { display: none; }
#nuthouse-corner { position: fixed; top: 8px; right: 8px; z-index: 30; display: flex; gap: 6px; opacity: 0.55; }
#nuthouse-corner:hover { opacity: 1; }
#nuthouse-corner button {
  font-size: 18px; width: 36px; height: 36px; border-radius: 8px; border: 0; cursor: pointer;
  background: rgb(0 0 0 / 0.55); color: #fff;
}
#nuthouse-bar {
  position: fixed; left: 8px; bottom: 8px; z-index: 30; display: flex; gap: 12px; align-items: center;
  font-size: 13px; color: #ddd; opacity: 0.55; background: rgb(0 0 0 / 0.55); padding: 6px 12px; border-radius: 8px;
}
#nuthouse-bar:hover { opacity: 1; }
#nuthouse-bar a { color: #fff; }
#nuthouse-bar .by { opacity: 0.8; }

.room-box { display: grid; gap: 10px; max-width: 80vw; text-align: center; }
.room-box .room-sub { font-size: 18px; font-weight: 400; opacity: .85; white-space: pre-line; }

#nuthouse-embed-box { position: fixed; left: 8px; right: 8px; bottom: 52px; z-index: 31; max-width: 560px; background: #fff; color: #1d2a1e; border-radius: 12px; padding: 14px 16px; font-size: 14px; box-shadow: 0 12px 40px rgb(0 0 0 / .4); }
#nuthouse-embed-box[hidden] { display: none; }
#nuthouse-embed-box textarea { width: 100%; font: 12px/1.4 ui-monospace, Menlo, monospace; padding: 8px; border-radius: 8px; border: 1px solid #d9e2d4; box-sizing: border-box; }
#nuthouse-embed-box button { margin-top: 8px; font: inherit; padding: 6px 12px; border-radius: 8px; border: 1px solid #d9e2d4; background: #f3f6f0; cursor: pointer; }
#nuthouse-made { position: fixed; left: 8px; bottom: 8px; z-index: 30; font-size: 18px; text-decoration: none; opacity: .6; }
#nuthouse-made:hover { opacity: 1; }

/* ---- Arcade mode: the full play page (not embedded). Game on the left, stars and scores on the right;
   on phones the panel is a sheet opened from the top bar so the game gets the whole screen. ---- */
body.arcade-mode {
  display: grid; place-items: stretch; height: 100dvh;
  grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr);
  background: #15110c; color: #fff;
}
.arcade-mode .play-top {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: #1b5e2b; color: #fff; min-height: 44px; box-sizing: border-box;
}
.arcade-mode .play-top a, .arcade-mode .play-top button {
  color: #241a0e; background: #ffd43b; border: 2px solid #241a0e; border-radius: 999px; padding: 5px 14px;
  font: 800 14px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.arcade-mode .play-top a:focus-visible, .arcade-mode .play-top button:focus-visible { outline: 3px solid #8ad8ff; outline-offset: 2px; }
.arcade-mode .play-back { background: #fff !important; }
.arcade-mode .play-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.arcade-mode .play-name h1 { margin: 0; font-size: 18px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .02em; }
.arcade-mode .play-name .by { font-size: 14px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arcade-mode .play-name .draft { font-size: 12px; background: #ff8c1a; color: #241a0e; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.arcade-mode .play-toggle { display: none; }

.arcade-mode #stage { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; }
.arcade-mode #overlay { position: absolute; }
.arcade-mode #nuthouse-corner { top: auto; bottom: 8px; right: 308px; }

#arcade-panel {
  background: #fff6e0; color: #241a0e; overflow-y: auto; padding: 16px; box-sizing: border-box; font-size: 15px;
  display: flex; flex-direction: column; gap: 18px; border-left: 3px solid #241a0e;
}
#arcade-panel [hidden] { display: none !important; }
#arcade-panel h2 { margin: 0 0 6px; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
#arcade-panel .small { font-size: 13px; color: #6b6358; margin: 4px 0 0; }
#arcade-panel a { color: #1b7228; font-weight: 700; }
#arcade-panel .panel-close { display: none; }
.panel-stars .avg { margin: 0; font-size: 28px; font-weight: 900; }
.panel-stars .avg .small { font-size: 13px; font-weight: 400; }
.rate { display: flex; gap: 2px; margin-top: 6px; }
.rate button { font-size: 30px; line-height: 1; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: #d8ccb4; padding: 0; border-radius: 8px; }
.rate button.on, .rate button.hover { color: #e8a200; }
.rate button:focus-visible { outline: 3px solid #29adff; }
.rate[aria-busy="true"] { opacity: .6; pointer-events: none; }
.score-list { margin: 0; padding: 0; list-style: none; counter-reset: rank; background: #fff; border: 2px solid #241a0e; border-radius: 12px; overflow: hidden; }
.score-list li { counter-increment: rank; display: flex; gap: 8px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.score-list li:nth-child(odd) { background: #fff9ec; }
.score-list li::before { content: counter(rank); width: 1.6em; color: #6b6358; font-weight: 700; }
.score-list li:first-child { background: #ffe9a8; font-weight: 800; }
.score-list li.new { animation: score-new 1.6s ease 2; }
@keyframes score-new { 50% { background: #9be15d; } }
.score-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.panel-nums div { background: #fff; border: 2px solid #241a0e; border-radius: 12px; padding: 8px 4px; display: grid; }
.panel-nums b { font-size: 17px; font-weight: 900; white-space: nowrap; }
.panel-nums span { font-size: 12px; color: #6b6358; text-transform: uppercase; letter-spacing: .05em; }
#arcade-panel #nuthouse-bar {
  position: static; opacity: 1; background: none; color: #6b6358; padding: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; margin-top: auto;
}
#arcade-panel #nuthouse-embed-box { position: static; box-shadow: none; border: 2px solid #241a0e; padding: 10px; }

@media (max-width: 899px) {
  body.arcade-mode { grid-template-columns: minmax(0, 1fr); }
  .arcade-mode .play-toggle { display: inline-block; }
  .arcade-mode .play-name .by { display: none; }
  .arcade-mode #nuthouse-corner { right: 8px; }
  #arcade-panel {
    position: fixed; left: 0; right: 0; bottom: 0; max-height: 80dvh; z-index: 40; border-left: 0; border-top: 3px solid #241a0e;
    border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgb(0 0 0 / .5); transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  #arcade-panel.open { transform: none; visibility: visible; }
  #arcade-panel .panel-close { display: block; position: absolute; top: 6px; right: 10px; font-size: 28px; border: 0; background: none; cursor: pointer; color: #241a0e; }
}
@media (max-width: 480px) {
  .arcade-mode .play-next { display: none; }
  .arcade-mode .play-top { gap: 8px; padding: 6px 8px; }
  .arcade-mode .play-name h1 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { #arcade-panel { transition: none; } .score-list li.new { animation: none; } }