/* Sizes are in rem, and the root font scales with the window. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-size: clamp(10px, min(2.1vh, 3.9vw), 28px);
  width: 100%; height: 100%; overflow: hidden;
  background: #39a6f5 url("../../assets/sprites/bg.jpg") center bottom / cover no-repeat;
}
body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: "OneMobilePOP", "Malgun Gothic", sans-serif; color: #4a2c12;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; pointer-events: auto; }
img { display: block; -webkit-user-drag: none; }

.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
}
.stage-slot { flex: 1 1 0; min-height: 0; width: 100%; }

/* ---- shared parts ---- */
.gold {
  display: block; padding: .95rem 2.6rem; border-radius: 99rem; font-size: 1.9rem; color: #5a3200;
  background: linear-gradient(#ffe36b, #ffc11c); box-shadow: 0 .42rem 0 #d98a12, 0 .9rem 1.2rem rgba(90,50,0,.28), inset 0 .16rem 0 rgba(255,255,255,.7);
}
.gold.small { font-size: 1.4rem; padding: .65rem 2.2rem; }
.gold:active, .soft:active, .step:active, .chip:active { transform: translateY(.2rem); }
.soft {
  display: flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 1.2rem; background: #fff; color: #4a2c12;
  box-shadow: 0 .3rem 0 #cfd8ea, 0 .5rem .8rem rgba(40,60,110,.18);
}
.soft.wide { width: 100%; padding: .85rem; font-size: 1.25rem; }
.icon { width: 3.6rem; height: 3.6rem; }
.icon img { width: 100%; height: 100%; object-fit: contain; }
.icon:active { transform: scale(.92); }
.corner { position: absolute; top: max(.8rem, env(safe-area-inset-top)); left: max(.8rem, env(safe-area-inset-left)); z-index: 3; }
.corner-right { left: auto; right: max(.8rem, env(safe-area-inset-right)); }
.sign {
  position: absolute; top: -1.6rem; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .55rem 2.2rem; border-radius: 1.2rem;
  font-size: 1.7rem; color: #fff7e6; background: linear-gradient(#b5622b, #7f421b); box-shadow: 0 .3rem 0 #5a2d10, 0 .5rem .8rem rgba(60,30,0,.3); text-shadow: 0 .12rem 0 rgba(60,30,0,.6);
}
.panel {
  position: relative; margin: auto; width: min(100%, 27rem); max-height: 100%; display: flex; flex-direction: column; gap: 1rem;
  padding: 3rem 1.4rem 1.4rem; border-radius: 1.8rem; pointer-events: auto; background: rgba(255,255,255,.95); box-shadow: 0 .4rem 0 #d6dff0, 0 1rem 2rem rgba(20,60,120,.3);
}
.panel-foot { display: flex; justify-content: center; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  font-size: 1.2rem; color: #fff; box-shadow: inset 0 -.14rem 0 rgba(0,0,0,.2), 0 0 0 .14rem #fff;
}
.face { width: 100%; height: 100%; object-fit: contain; }

/* ---- title ---- */
.logo { width: min(100%, 34rem); aspect-ratio: 2 / 1; object-fit: contain; flex: none; }
.menu { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: min(100%, 25rem); }
.gold.start { width: 100%; font-size: 2.1rem; }
.menu-small { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; width: 100%; }
.menu-small .soft { flex-direction: column; padding: .55rem .2rem; font-size: 1.02rem; }
.menu-small img { width: 2.5rem; height: 2.5rem; object-fit: contain; }

/* ---- setup ---- */
.question { text-align: center; font-size: 1.35rem; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 1.6rem; }
.count-value { font-size: 3.1rem; min-width: 7rem; text-align: center; }
.step {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; font-size: 2.3rem; line-height: 1; color: #fff; background: linear-gradient(#58a6ff, #2472e6);
  box-shadow: 0 .28rem 0 #1551ad, inset 0 .14rem 0 rgba(255,255,255,.5);
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.chip { width: 5.4rem; padding: .7rem 0; border-radius: 99rem; font-size: 1.35rem; background: #f4f6fb; box-shadow: 0 .24rem 0 #d3dbea; }
.chip.on { background: linear-gradient(#ffe36b, #ffc11c); box-shadow: 0 .24rem 0 #d98a12; }
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; overflow: hidden auto; touch-action: pan-y; padding: .2rem; }
.row { display: flex; align-items: center; gap: .55rem; padding: .3rem .8rem .3rem .45rem; border-radius: 99rem; background: #fff; box-shadow: 0 0 0 .12rem #e3e9f4, 0 .2rem .35rem rgba(40,60,110,.12); }
.row-face { width: 3.2rem; height: 3.2rem; flex: none; }
.row input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.25rem; color: #4a2c12;
  user-select: text; -webkit-user-select: text;
}
.row:focus-within { box-shadow: 0 0 0 .18rem #ffc11c; }
.pencil { color: #6d8ac0; font-size: 1.3rem; }

/* ---- play ---- */
.turnbar { flex: none; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .5rem 1.4rem .7rem; border-radius: 1.4rem; background: rgba(23,70,170,.86); color: #fff; }
.turn-status { font-size: 1.05rem; white-space: pre; font-family: "Freesentation", "Malgun Gothic", sans-serif; font-weight: 700; }
.turn-pill { display: flex; align-items: center; gap: .55rem; padding: .25rem 1.3rem .25rem .3rem; border-radius: 99rem; background: #fff; color: #4a2c12; font-size: 1.35rem; }
.hint {
  flex: none; padding: .7rem 1.9rem; border-radius: 99rem; font-size: 1.3rem; background: rgba(255,255,255,.95); box-shadow: 0 .24rem 0 #d3dbea, 0 .5rem .8rem rgba(40,60,110,.18);
}
.tokens { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: .75rem; }
.token { position: relative; width: 4.1rem; height: 4.1rem; padding: .3rem; border-radius: 50%; background: #fff; box-shadow: 0 .2rem .4rem rgba(30,50,100,.28); transition: transform .18s; }
.token .badge { position: absolute; right: -.15rem; bottom: -.15rem; width: 1.6rem; height: 1.6rem; font-size: .95rem; }
.token.now { transform: scale(1.14); box-shadow: 0 0 0 .22rem var(--c), 0 .3rem .6rem rgba(30,50,100,.35); }
.token.out { filter: grayscale(1); opacity: .5; }

/* ---- out / winner ---- */
.result {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.2rem;
  pointer-events: auto; overflow: hidden; animation: fade .25s ease-out;
}
.result.out { background: radial-gradient(circle at 50% 40%, rgba(180,120,255,.92), rgba(70,40,160,.96)); }
.result.win { background: radial-gradient(circle at 50% 40%, rgba(255,214,90,.94), rgba(236,120,30,.96)); }
.rays {
  position: absolute; left: 50%; top: 36%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; opacity: .22; animation: spin 16s linear infinite;
  background: repeating-conic-gradient(#fff 0 12deg, transparent 12deg 30deg);
}
.result > :not(.rays) { position: relative; }
.result-ch { height: min(38vh, 24rem); max-width: 80%; object-fit: contain; animation: jump .7s cubic-bezier(.2,1.5,.4,1) both; }
.ribbon {
  display: flex; align-items: center; gap: 1.1rem; padding: .55rem 2.2rem; border-radius: 1.2rem; font-size: 3.3rem; color: #fff; text-shadow: 0 .2rem 0 rgba(90,0,20,.6);
  background: linear-gradient(#ff5c62, #d4202e); box-shadow: 0 .4rem 0 #8e1320, 0 .8rem 1.4rem rgba(60,0,20,.4); animation: pop .4s .1s cubic-bezier(.2,1.6,.4,1) both;
}
.ribbon i { font-style: normal; color: #ffd84a; font-size: 2.3rem; }
.result-card { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem 2.2rem; border-radius: 1.4rem; background: #fff; font-size: 1.4rem; text-align: center; box-shadow: 0 .3rem 0 #d3dbea; }
.result-card small { font: 700 1rem "Freesentation", "Malgun Gothic", sans-serif; color: #8a6b4a; }
.result-actions { display: flex; flex-direction: column; align-items: center; gap: .8rem; width: min(100%, 22rem); }
.result-actions .gold { width: 100%; }

/* ---- popups ---- */
.modal { position: absolute; inset: 0; z-index: 10; display: flex; padding: 2.4rem 1rem 1rem; background: rgba(20,40,90,.55); pointer-events: auto; animation: fade .15s ease-out; }
.help { list-style: none; display: grid; gap: .7rem; overflow-y: auto; }
.help li { display: grid; gap: .1rem; }
.help b { font-weight: normal; font-size: 1.2rem; color: #2472e6; }
.help span { font: 700 1.1rem "Freesentation", "Malgun Gothic", sans-serif; }
.rank { list-style: none; display: grid; gap: .4rem; overflow-y: auto; }
.rank li { display: flex; align-items: center; gap: .8rem; padding: .55rem 1rem; border-radius: .9rem; background: #f4f6fb; font-size: 1.2rem; }
.rank b { font-weight: normal; color: #d98a12; width: 1.6rem; text-align: center; }
.rank span { flex: 1; }
.rank em { font-style: normal; color: #2472e6; }
.empty { text-align: center; white-space: pre-line; font-size: 1.2rem; line-height: 1.6; padding: 1rem 0; }
.sound-row { display: flex; align-items: center; justify-content: center; gap: .8rem; width: 100%; font-size: 1.3rem; padding: .4rem; }
.sound-row img { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.pause-list { display: grid; gap: .7rem; }
.animals { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.animal { display: grid; justify-items: center; gap: .15rem; padding: .4rem .2rem; border-radius: 1rem; background: #f4f6fb; font-size: .95rem; }
.animal .face { width: 4rem; height: 4rem; }
.animal.on { background: #ffe8a0; box-shadow: 0 0 0 .18rem #ffc11c; }
.no-webgl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.4rem; line-height: 1.7; color: #fff; background: rgba(20,40,90,.8); }

@keyframes fade { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes jump { from { transform: translateY(40%) scale(.6); opacity: 0; } }

/* ---- portrait uses the tall art ---- */
@media (max-aspect-ratio: 1/1) {
  html { background-image: url("../../assets/sprites/bg_mo.jpg"); }
}

/* ---- PC and landscape: logo and barrel left, menu right ---- */
@media (min-aspect-ratio: 1/1) {
  .screen-title { display: grid; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); grid-template-rows: 30vh minmax(0, 1fr); column-gap: 2rem; padding-left: 4vw; padding-right: 4vw; }
  .screen-title .logo { grid-column: 1; grid-row: 1; justify-self: center; width: auto; height: 30vh; }
  .screen-title .stage-slot { grid-column: 1; grid-row: 2; }
  .screen-title .menu { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; }
  .screen-title .menu-small { grid-template-columns: 1fr; }
  .screen-title .menu-small .soft { flex-direction: row; padding: .7rem; font-size: 1.25rem; }
  .panel-wide { width: min(100%, 50rem); }
  .panel-wide .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-ch { height: 38vh; }
  .result { gap: .7rem; }
}