@charset "utf-8";
/* 四季映姫の○×裁判 0.1.2
   - 盤面の大きさは JavaScript で測らない。コンテナクエリだけで決める。
   - 高さは dvh ではなく svh（遊んでいる最中に変わらないため）。
   - calc の中に 0px のフォールバックを書かない（Cocoon の縮小化で 0 に潰れるため）。
   - @media / @container は、必ず基本の指定より後ろに書く。
   - --u（cqmin）を top に使わない。位置は % で置く。 */

:root{
  --esk-paper:    #f7f2e7;   /* 生成り */
  --esk-paper2:   #ece4d2;
  --esk-ink:      #23201c;   /* 墨 */
  --esk-ink-dim:  #5c554a;
  --esk-line:     #b9ad94;
  --esk-red:      #b7282e;   /* 朱（是） */
  --esk-red-deep: #8c1c21;
  --esk-navy:     #1f3a63;   /* 紺（非） */
  --esk-gold:     #8a6410;   /* 金（生成りの上で 4.5:1 を通す濃さ） */
  --esk-green:    #2f6b3a;
}

*{ box-sizing: border-box; }

/* display:flex を持つ画面にも hidden を効かせる（これが無いと全画面が重なる） */
[hidden]{ display: none !important; }

html{ background: var(--esk-paper); }

body{
  margin: 0;
  background: var(--esk-paper);
  color: var(--esk-ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  line-height: 1.7;
}

/* ===== 遊び場 ===== */

.esk-stage{
  width: 100%;
  height: 100svh;
  container: eskshell / size;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.esk-frame{
  position: relative;
  width: min(100cqw, calc(100cqh * 16 / 9));
  height: 100cqh;
  container: eskframe / size;
  background: var(--esk-paper);
  overflow: hidden;
  touch-action: manipulation;
  overscroll-behavior: contain;
}

/* 押すと青く光る・字が選ばれる・長押しメニューが出る、を止める */
.esk-frame,
.esk-frame *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.esk-title,
.esk-play,
.esk-veil,
.esk-credit{
  --u: 1cqmin;                       /* 短い辺の1% */
  font-size: max(11px, calc(3.2 * var(--u)));
}

/* ===== 絵の枠（img/ に絵が入ったら差しかわる） ===== */

.esk-art{
  position: relative;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  pointer-events: none;
}
.esk-art > svg{
  width: 100%;
  height: 100%;
  display: block;
}
.esk-art.is-photo > svg{ display: none; }

/* ===== タイトル ===== */

.esk-title{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.esk-art-titlebg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.esk-art-titlebg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, #fffdf6 0%, rgba(255,253,246,0) 60%),
    repeating-linear-gradient(90deg, rgba(35,32,28,.045) 0 1px, rgba(35,32,28,0) 1px 14px),
    linear-gradient(180deg, #fbf7ee 0%, #e9dfc9 100%);
}
.esk-art-titlebg.is-photo::after{ background: rgba(251,248,240,.2); }

.esk-title-in{
  position: relative;
  z-index: 1;
  width: min(92cqw, calc(64 * var(--u)));
  text-align: center;
  padding: calc(2 * var(--u));
}

.esk-title-sub{
  margin: 0;
  font-size: max(12px, calc(2.9 * var(--u)));
  letter-spacing: .12em;
  color: var(--esk-ink-dim);
}
.esk-title-main{
  margin: calc(.6 * var(--u)) 0 0;
  font-size: calc(7.6 * var(--u));
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.25;
}
.esk-title-main span,
.esk-title-main b{ display: block; }          /* 「○×裁判」を途中で折らない */
.esk-title-main span{ font-size: .72em; }
.esk-title-main b{ color: var(--esk-red); }
.esk-title-lead{
  margin: calc(.4 * var(--u)) 0 0;
  font-size: max(14px, calc(3.4 * var(--u)));
  color: var(--esk-ink-dim);
}

.esk-title-eiki{
  width: calc(30 * var(--u));
  height: calc(40 * var(--u));
  margin: calc(1 * var(--u)) auto 0;
}

.esk-title-btns{
  margin-top: calc(1.4 * var(--u));
  display: flex;
  gap: calc(1.6 * var(--u));
  justify-content: center;
  flex-wrap: wrap;
}

.esk-btn{
  font: inherit;
  font-size: max(16px, calc(3.6 * var(--u)));
  font-weight: 700;
  color: var(--esk-ink);
  background: #fffdf7;
  border: calc(.35 * var(--u)) solid var(--esk-ink);
  border-radius: calc(1.2 * var(--u));
  padding: calc(1.1 * var(--u)) calc(3.4 * var(--u));
  cursor: pointer;
  box-shadow: 0 calc(.5 * var(--u)) 0 rgba(35,32,28,.28);
}
.esk-btn:active{ transform: translateY(calc(.35 * var(--u))); box-shadow: none; }
.esk-btn-main{
  color: #fffdf7;
  background: var(--esk-red);
  border-color: var(--esk-red-deep);
}

.esk-title-opt{ margin-top: calc(1.8 * var(--u)); }
.esk-title-optlabel{
  display: block;
  font-size: max(12px, calc(2.7 * var(--u)));
  color: var(--esk-ink-dim);
  margin-bottom: calc(.6 * var(--u));
}
.esk-seg{
  display: inline-flex;
  border: calc(.3 * var(--u)) solid var(--esk-ink);
  border-radius: calc(1 * var(--u));
  overflow: hidden;
}
.esk-segbtn{
  font: inherit;
  font-size: max(13px, calc(2.9 * var(--u)));
  font-weight: 700;
  color: var(--esk-ink);
  background: #fffdf7;
  border: 0;
  border-left: calc(.3 * var(--u)) solid var(--esk-ink);
  padding: calc(.8 * var(--u)) calc(2.4 * var(--u));
  cursor: pointer;
}
.esk-segbtn:first-child{ border-left: 0; }
.esk-segbtn[aria-pressed="true"]{ color: #fffdf7; background: var(--esk-navy); }

.esk-title-best{
  margin: calc(1.4 * var(--u)) 0 0;
  min-height: calc(3.4 * var(--u));
  font-size: max(12px, calc(2.9 * var(--u)));
  color: var(--esk-ink-dim);
}

/* ===== 法廷 ===== */

.esk-play{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.esk-art-courtbg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.esk-art-courtbg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(35,32,28,0) 0 61.4%, rgba(35,32,28,.10) 61.4% 62%, rgba(35,32,28,0) 62%),
    linear-gradient(180deg, #fbf8f0 0%, #f2ebdb 54%, #ded3bb 100%);
}
.esk-art-courtbg.is-photo::after{ background: rgba(251,248,240,.18); }

.esk-hud{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(1 * var(--u));
  padding: calc(1 * var(--u)) calc(2 * var(--u)) calc(.4 * var(--u));
}
.esk-hud-cell{ display: flex; align-items: baseline; gap: calc(.7 * var(--u)); }
.esk-hud-key{ font-size: max(12px, calc(2.6 * var(--u))); color: var(--esk-ink-dim); }
.esk-hud-val{ font-size: max(17px, calc(4.2 * var(--u))); font-weight: 800; font-variant-numeric: tabular-nums; }
.esk-hud-streak.is-hot .esk-hud-val{ color: var(--esk-red); }

.esk-clock{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--u));
  padding: 0 calc(2 * var(--u)) calc(.8 * var(--u));
}
.esk-clock-bar{
  flex: 1 1 auto;
  height: calc(1.8 * var(--u));
  min-height: 6px;
  background: #d7cbb2;
  border: calc(.25 * var(--u)) solid var(--esk-ink);
  border-radius: calc(1 * var(--u));
  overflow: hidden;
}
.esk-clock-bar > i{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--esk-navy);
  transform-origin: left center;
}
.esk-clock-bar.is-low > i{ background: var(--esk-red); }
.esk-clock-num{
  font-size: max(15px, calc(3.6 * var(--u)));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: calc(6 * var(--u));
  text-align: right;
}

.esk-court{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 映姫は右上の壇上。立ち絵と同じ 100:130 にして、余白で浮かないようにする */
.esk-eiki{
  position: absolute;
  right: 2%;
  top: 16%;
  width: 32%;
  aspect-ratio: 100 / 130;
}
.esk-eiki-art{ width: 100%; height: 100%; }
/* 映姫が立つ壇（絵の足もとに敷く。うなずきでは動かさない） */
.esk-eiki::before{
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -4%;
  height: 7%;
  border-radius: 3px;
  background: linear-gradient(180deg, #9a6a42 0%, #6e4527 100%);
  box-shadow: 0 2px 0 rgba(35,32,28,.22);
}
.esk-eiki.is-ok  .esk-eiki-art{ animation: esk-nod .34s ease-out; }
.esk-eiki.is-bad .esk-eiki-art{ animation: esk-shake .32s ease-out; }

@keyframes esk-nod{
  0%{ transform: translateY(0); }
  45%{ transform: translateY(4%); }
  100%{ transform: translateY(0); }
}
@keyframes esk-shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-3%); }
  75%{ transform: translateX(3%); }
}

/* 小町は左下 */
.esk-komachi{
  position: absolute;
  left: 1%;
  bottom: 0;
  width: 22%;
  aspect-ratio: 100 / 130;
}
.esk-komachi-art{ width: 100%; height: 100%; }
.esk-komachi.is-hidden{ visibility: hidden; }

/* 吹き出し */
.esk-bubble{
  position: absolute;
  left: 4%;
  right: 4%;
  top: 3%;
  z-index: 3;
  min-height: calc(9 * var(--u));
  padding: calc(1.2 * var(--u)) calc(2 * var(--u));
  background: #fffdf7;
  border: calc(.35 * var(--u)) solid var(--esk-ink);
  border-radius: calc(1.4 * var(--u));
  box-shadow: 0 calc(.5 * var(--u)) 0 rgba(35,32,28,.2);
  font-size: max(16px, calc(3.7 * var(--u)));
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-14%);
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.esk-bubble.is-on{ opacity: 1; transform: translateY(0); }
/* 折り返すときは語の切れ目（空白）で折る。「わたしは」を途中で切らない */
.esk-bubble-text{
  display: block;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.esk-bubble b{ color: var(--esk-red); }

/* 被告がせり上がる台 */
/* 立ち絵と同じ 100:130 にして、持ち物の位置が絵に対してずれないようにする。
   ★aspect-ratio に max-height を足さない（効かなくなる） */
.esk-dock{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 66%;
  aspect-ratio: 100 / 130;
  transform: translate(-50%, 100%);
}
.esk-dock.is-up{ transform: translate(-50%, 0); transition: transform .34s cubic-bezier(.2,.9,.3,1); }
.esk-dock.is-down{ transform: translate(-50%, 100%); transition: transform .24s ease-in; }

/* 被告の立ち絵は台いっぱい。持ち物はその手前に重ねる（＝抱えて見える） */
.esk-hikoku-art{
  position: absolute;
  inset: 0;
}

/* 持ち物は立ち絵の手前に置く（＝抱えて見える）。z-index が無いと絵に隠れる */
.esk-items{
  position: absolute;
  z-index: 2;
  left: -8%;
  right: -8%;
  bottom: 36%;
  height: 21%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4%;
}
.esk-item{
  height: 100%;
  aspect-ratio: 1 / 1;
  background: #fffdf7;
  border: calc(.3 * var(--u)) solid var(--esk-ink);
  border-radius: 24%;
  /* ★padding の % は「親の幅」で決まる。ここで % を使うと絵が極端に小さくなる */
  padding: calc(.6 * var(--u));
  box-shadow: 0 calc(.35 * var(--u)) 0 rgba(35,32,28,.24);
}
.esk-item > svg{ width: 100%; height: 100%; display: block; }
.esk-item.is-photo{
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 判定のはんこ */
.esk-stamp{
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 4;
  width: 34%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.4) rotate(-14deg);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 1;
  border-radius: 50%;
}
.esk-stamp.is-on{ animation: esk-stamp .5s ease-out; }
.esk-stamp.is-o{ color: var(--esk-red); border: calc(1.2 * var(--u)) solid var(--esk-red); }
.esk-stamp.is-x{ color: var(--esk-navy); border: calc(1.2 * var(--u)) solid var(--esk-navy); }

@keyframes esk-stamp{
  0%{ opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(-14deg); }
  30%{ opacity: 1; transform: translate(-50%,-50%) scale(.92) rotate(-14deg); }
  70%{ opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-14deg); }
  100%{ opacity: 0; transform: translate(-50%,-50%) scale(1) rotate(-14deg); }
}

/* 説教 */
.esk-sekkyo{
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(35,32,28,.84);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2 * var(--u));
}
.esk-sekkyo-in{
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  max-width: 96%;
}
.esk-sekkyo-art{
  flex: 0 0 auto;
  width: calc(30 * var(--u));      /* 説教の顔が読める大きさ（390幅で約117px） */
  height: calc(46 * var(--u));
}
.esk-sekkyo-text{
  margin: 0;
  color: #fffdf7;
  font-size: max(15px, calc(3.6 * var(--u)));
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

/* 残り時間（この1件ぶん） */
.esk-limit{
  position: relative;
  z-index: 2;
  height: calc(1.6 * var(--u));
  min-height: 6px;
  background: #cfc2a8;
  flex: 0 0 auto;
}
.esk-limit > i{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--esk-gold);
  transform-origin: left center;
}

/* ○と× */
.esk-choice{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  gap: calc(1.6 * var(--u));
  padding: calc(1.4 * var(--u)) calc(2 * var(--u)) calc(1.8 * var(--u));
}
.esk-choicebtn{
  flex: 1 1 50%;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(.2 * var(--u));
  padding: calc(1.2 * var(--u)) calc(1 * var(--u));
  background: #fffdf7;
  border: calc(.45 * var(--u)) solid currentColor;
  border-radius: calc(1.6 * var(--u));
  cursor: pointer;
  box-shadow: 0 calc(.6 * var(--u)) 0 rgba(35,32,28,.3);
}
.esk-choicebtn:active{ transform: translateY(calc(.4 * var(--u))); box-shadow: none; }
.esk-choicebtn[disabled]{ opacity: .5; cursor: default; }
.esk-choice-o{ color: var(--esk-red); }
.esk-choice-x{ color: var(--esk-navy); }
.esk-choice-mark{
  font-size: max(32px, calc(8 * var(--u)));
  font-weight: 800;
  line-height: 1;
}
.esk-choice-word{
  font-size: max(13px, calc(2.7 * var(--u)));
  font-weight: 700;
  color: var(--esk-ink);
}

/* ===== かぶせ画面 ===== */

.esk-veil{
  position: absolute;
  inset: 0;
  z-index: 9;
  background: rgba(35,32,28,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2 * var(--u));
  overflow: auto;
}
.esk-panel{
  width: min(92cqw, calc(72 * var(--u)));
  max-height: 94cqh;
  overflow: auto;
  background: var(--esk-paper);
  border: calc(.5 * var(--u)) solid var(--esk-ink);
  border-radius: calc(1.6 * var(--u));
  padding: calc(2.4 * var(--u));
  text-align: center;
}
.esk-panel-title{
  margin: 0 0 calc(1.2 * var(--u));
  font-size: max(21px, calc(5 * var(--u)));
  font-weight: 800;
  color: var(--esk-red);
}
.esk-panel-body{
  font-size: max(14px, calc(3.1 * var(--u)));
  text-align: left;
  color: var(--esk-ink);
}
.esk-panel-body p{ margin: 0 0 calc(1 * var(--u)); }
.esk-panel-body ol,
.esk-panel-body ul{ margin: 0 0 calc(1 * var(--u)); padding-left: calc(4 * var(--u)); }
.esk-panel-body li{ margin-bottom: calc(.5 * var(--u)); }

.esk-score{
  list-style: none;
  margin: 0 0 calc(1.4 * var(--u));
  padding: 0;
}
.esk-score li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(1 * var(--u));
  padding: calc(.7 * var(--u)) calc(1 * var(--u));
  border-bottom: 1px solid var(--esk-line);
  font-size: max(14px, calc(3.1 * var(--u)));
}
.esk-score li b{ font-size: max(19px, calc(4.2 * var(--u))); font-variant-numeric: tabular-nums; }
.esk-rank{
  margin: 0 0 calc(1.2 * var(--u));
  padding: calc(1.2 * var(--u));
  background: #fffdf7;
  border: calc(.35 * var(--u)) solid var(--esk-ink);
  border-radius: calc(1.2 * var(--u));
  text-align: center;
}
.esk-rank span{ display: block; font-size: max(12px, calc(2.7 * var(--u))); color: var(--esk-ink-dim); }
.esk-rank.has-art{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.6 * var(--u));
}
.esk-rank-art{
  flex: 0 0 auto;
  width: calc(13 * var(--u));
  height: calc(20 * var(--u));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.esk-rank-text{ text-align: center; }
.esk-rank b{ display: block; font-size: max(24px, calc(5.6 * var(--u))); color: var(--esk-red); line-height: 1.3; }

.esk-panel-btns{
  margin-top: calc(1.4 * var(--u));
  display: flex;
  gap: calc(1.4 * var(--u));
  justify-content: center;
  flex-wrap: wrap;
}

/* タイトル画面の中に置く。遊んでいる最中はボタンに重ならない */
.esk-credit{
  margin: calc(1.2 * var(--u)) 0 0;
  text-align: center;
  font-size: max(11px, calc(2.3 * var(--u)));
  color: var(--esk-ink-dim);
  pointer-events: none;
}

/* ===== よこ・PC（16:9）では法廷を横に広げる ===== */

@container eskframe (min-aspect-ratio: 1/1){
  .esk-eiki{ right: 4%; top: 12%; width: 17%; }
  .esk-komachi{ left: 3%; bottom: 0; width: 14%; }
  .esk-bubble{ left: 21%; right: 23%; top: 2%; font-size: max(16px, calc(3.2 * var(--u))); }   /* 右端を77%で止め、映姫の枠（左端79%）に掛けない */
  .esk-dock{ width: 22%; }
  .esk-choice{ padding: calc(1 * var(--u)) calc(10 * var(--u)) calc(1.4 * var(--u)); }
  .esk-choice-mark{ font-size: max(30px, calc(6.4 * var(--u))); }
  .esk-title-main{ font-size: calc(6.4 * var(--u)); }
  /* よこ長では、映姫を左、題名とボタンを右に並べる（縦に積むと 390px の高さに入らない） */
  .esk-title-in{
    width: auto;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: calc(5 * var(--u));
    align-items: center;
  }
  .esk-title-eiki{
    grid-column: 1;
    grid-row: 1 / span 5;
    width: calc(36 * var(--u));
    height: calc(64 * var(--u));
    margin: 0;
  }
  .esk-title-head,
  .esk-title-btns,
  .esk-title-opt,
  .esk-title-best,
  .esk-title .esk-credit{ grid-column: 2; }
}

/* せまい画面では吹き出しの字を大きめに保つ */
@container eskframe (max-width: 360px){
  .esk-bubble{ font-size: max(16px, calc(4.1 * var(--u))); }
  .esk-eiki{ top: 21%; }          /* 長い言いわけが2行になると吹き出しが伸びる。映姫を少し下げる */
}

/* ===== ゲームの外の説明（Cocoon の本文に出る） ===== */

.esk-doc{
  max-width: 44em;
  margin: 0 auto;
  padding: 1.6em 1.1em 2.4em;
  color: var(--esk-ink);
}
.esk-doc h2{
  font-size: 1.25em;
  margin: 1.6em 0 .5em;
  padding-left: .5em;
  border-left: .3em solid var(--esk-red);
}
.esk-doc dt{ font-weight: 700; margin-top: .7em; }
.esk-doc dd{ margin: 0 0 0 1.2em; }
.esk-doc-note{
  margin-top: 1.8em;
  padding: .9em 1em;
  background: #efe8d7;
  border-radius: .5em;
  font-size: .92em;
  color: var(--esk-ink-dim);
}

/* ===== 絵の上に置く字の「板」 =====
   背景の絵は場所によって暗いところ（柱・格子）がある。字の下に来ても読めるように、
   クリーム色の板を敷く。濃さは「背景が真っ黒でも基準を割らない」値にしてある（2026-09-17 計算）。
     板 .84 … うすい字 #5c554a が 4.79:1、朱の大きな題名が 4.07:1（基準 3:1）
     板 .92 … 17px の朱（連続の数）が 4.931:1
   ★背景の絵を差しかえても、この板があれば読みやすさは変わらない。 */

.esk-art-titlebg.is-photo + .esk-title-in .esk-title-head{
  display: table;
  margin: 0 auto;
  padding: calc(.8 * var(--u)) calc(2.4 * var(--u)) calc(1 * var(--u));
  border-radius: calc(1.6 * var(--u));
  background: rgba(251,248,240,.84);
}
.esk-art-titlebg.is-photo + .esk-title-in .esk-title-optlabel,
.esk-art-titlebg.is-photo + .esk-title-in .esk-title-best:not(:empty),
.esk-art-titlebg.is-photo + .esk-title-in .esk-credit{
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: .1em .8em;
  border-radius: .9em;
  background: rgba(251,248,240,.84);
}

.esk-art-courtbg.is-photo ~ .esk-hud,
.esk-art-courtbg.is-photo ~ .esk-clock{
  background: rgba(251,248,240,.92);
}

@media (prefers-reduced-motion: reduce){
  .esk-dock.is-up, .esk-dock.is-down{ transition-duration: .01s; }
  .esk-bubble{ transition-duration: .01s; }
  .esk-eiki.is-ok .esk-eiki-art, .esk-eiki.is-bad .esk-eiki-art, .esk-stamp.is-on{ animation-duration: .01s; }
}

/* ===== WordPress の埋めこみ（iframe の index.html?embed=1。2026-09-18） =====
   遊び場を iframe いっぱいにして、下の説明文は出さない（同じ文を親ページのショートコードが出す）。
   iframe の中で縦スクロールが出ると、下の ○× がかくれて押せなくなるので、はみ出しは切る。 */
.is-embed,
.is-embed body{ height: 100%; overflow: hidden; }
.is-embed .esk-stage{ height: 100%; }
.is-embed .esk-doc{ display: none; }