/* reading-bento.css — 読み弁当 Reading Bento. A real lacquer box on a walnut table.
   The box is a photo (bento/img/box.webp); each compartment is placed over its
   tray by percentages measured on that photo, so the food sits inside the trays
   at any width. */
.rb {
  --rb-ink: #2b2320; --rb-cream: #f1e6d6; --rb-mute: #d6c4ab; --rb-red: #b3261e; --rb-green: #22715a;
  padding-bottom: 60px;
  color: var(--rb-cream);
  background: linear-gradient(rgba(20,10,5,.18), rgba(20,10,5,.38)), url(bento/img/table.webp) 0 0 / 740px auto repeat #4a2f22;
  background-attachment: fixed;
  font-family: 'Outfit', sans-serif;
}
.rb * { box-sizing: border-box; }
/* ---------- the lacquer: four finishes, picked by data-lq on .rb ----------
   Every word on the page sits on lacquer, paper or a card, never straight on
   the wood, so it always reads. */
.rb[data-lq="kuro"] {        /* 黒漆 black lacquer, gold leaf */
  --lq-bg: linear-gradient(160deg, #2a1510, #130a08 60%, #241310);
  --lq-flat: #1a0d0a; --lq-edge: #c9a45a; --lq-edge2: rgba(201,164,90,.5); --lq-text: #f3e7d3; --lq-sub: #d9c3a0;
  --lq-title: linear-gradient(180deg, #fbe6a8, #d4a24a 55%, #a8782c);
}
.rb[data-lq="shu"] {         /* 朱漆 vermilion lacquer, gold leaf */
  --lq-bg: radial-gradient(ellipse 70% 90% at 30% 0%, rgba(255,160,120,.28), transparent 60%), linear-gradient(160deg, #b8321f, #86190f 58%, #a2271a);
  --lq-flat: #7e160e; --lq-edge: #e8c170; --lq-edge2: rgba(232,193,112,.55); --lq-text: #fff3e3; --lq-sub: #f7d9b5;
  --lq-title: linear-gradient(180deg, #fff6d6, #f1c96c 55%, #c9913a);
}
.rb[data-lq="makie"] {       /* 蒔絵 black lacquer with sprinkled-gold waves and blossoms */
  --lq-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90' viewBox='0 0 120 90'%3E%3Cg fill='%23e0b660' fill-opacity='.75'%3E%3Cg transform='translate(24 26)'%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.6' fill='%23fff3c4'/%3E%3C/g%3E%3Cg transform='translate(54 50) scale(.62)'%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.6' fill='%23fff3c4'/%3E%3C/g%3E%3Cg transform='translate(14 62) scale(.45)'%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-6-5-6-13-2.5-15L0-12.5L2.5-15C6-13 6-5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.6' fill='%23fff3c4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left 8px top 4px / 120px 90px no-repeat,
           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cg fill='none' stroke='%23d9ae55' stroke-opacity='.55' stroke-width='1.2'%3E%3Cpath d='M120 120a20 20 0 0 1 40 0M140 120a20 20 0 0 1 40 0M160 120a20 20 0 0 1 40 0M180 120a20 20 0 0 1 40 0'/%3E%3Cpath d='M126 120a14 14 0 0 1 28 0M146 120a14 14 0 0 1 28 0M166 120a14 14 0 0 1 28 0M186 120a14 14 0 0 1 28 0'/%3E%3Cpath d='M132 120a8 8 0 0 1 16 0M152 120a8 8 0 0 1 16 0M172 120a8 8 0 0 1 16 0M192 120a8 8 0 0 1 16 0'/%3E%3Cpath d='M130 100a20 20 0 0 1 40 0M150 100a20 20 0 0 1 40 0M170 100a20 20 0 0 1 40 0'/%3E%3Cpath d='M136 100a14 14 0 0 1 28 0M156 100a14 14 0 0 1 28 0M176 100a14 14 0 0 1 28 0'/%3E%3C/g%3E%3C/svg%3E") right 6px bottom 0 / 220px 120px no-repeat,
           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%23e6c270'%3E%3Ccircle cx='7' cy='12' r='.7' opacity='.7'/%3E%3Ccircle cx='31' cy='40' r='.5' opacity='.6'/%3E%3Ccircle cx='62' cy='18' r='.8' opacity='.5'/%3E%3Ccircle cx='80' cy='66' r='.6' opacity='.7'/%3E%3Ccircle cx='18' cy='74' r='.5' opacity='.5'/%3E%3Ccircle cx='49' cy='83' r='.7' opacity='.6'/%3E%3Ccircle cx='71' cy='44' r='.4' opacity='.8'/%3E%3Ccircle cx='40' cy='8' r='.4' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 90px 90px,
           linear-gradient(160deg, #1d100c, #0c0605 60%, #1a0e0b);
  --lq-flat: #120907; --lq-edge: #d9ae55; --lq-edge2: rgba(217,174,85,.5); --lq-text: #f5ead8; --lq-sub: #dcc39a;
  --lq-title: linear-gradient(180deg, #fff0bf, #e0b24f 50%, #b07e2a);
}
.rb[data-lq="negoro"] {      /* 根来塗 red lacquer worn through to black at the edges */
  --lq-bg: radial-gradient(ellipse 62% 78% at 50% 46%, #a8321f 0 52%, rgba(168,50,31,0) 82%),
           radial-gradient(ellipse 30% 40% at 6% 88%, rgba(20,10,8,.9), transparent 70%),
           radial-gradient(ellipse 26% 36% at 96% 10%, rgba(20,10,8,.85), transparent 70%),
           linear-gradient(170deg, #2a1510, #160b08);
  --lq-flat: #4a150d; --lq-edge: #a7773f; --lq-edge2: rgba(167,119,63,.55); --lq-text: #fff1e2; --lq-sub: #f0cfb0;
  --lq-title: linear-gradient(180deg, #fff6ea, #f3dcc2);
}

.rb-head { padding-top: 22px; }
.rb-head, .rb-bar, .rb-setp, .rb-grid, .rb-colophon { max-width: 1120px; margin-left: auto; margin-right: auto; }
.rb-head, .rb-bar, .rb-grid { padding-left: 16px; padding-right: 16px; }
.rb-plaque { border-radius: 14px; padding: 18px 24px 16px; text-align: center; background: var(--lq-bg);
  box-shadow: 0 12px 26px rgba(0,0,0,.45), inset 0 0 0 1px var(--lq-edge), inset 0 0 0 5px rgba(0,0,0,.25), inset 0 0 0 6px var(--lq-edge2); }
.rb-plaque h1 { margin: 0; font: 800 2.1rem/1.25 'Outfit', sans-serif; background: var(--lq-title); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)); }
.rb-plaque h1 .jp { font-family: 'Noto Serif JP', serif; font-weight: 900; margin-right: .2em; }
.rb-rule { width: 130px; height: 1px; margin: 8px auto; background: linear-gradient(90deg, transparent, var(--lq-edge), transparent); }
.rb-lead { margin: 0 auto; color: var(--lq-text); font-size: 1rem; max-width: 700px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

.rb-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; margin-bottom: 16px; }
.rb-setb { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; text-align: left; border: 0; border-radius: 999px; padding: .5rem 1rem; cursor: pointer;
  background: var(--lq-flat); color: var(--lq-text); font: 500 .85rem 'Outfit', sans-serif; box-shadow: inset 0 0 0 1px var(--lq-edge), 0 3px 8px rgba(0,0,0,.3); }
.rb-setb b { font-weight: 800; }
.rb-setb em { font-style: normal; color: var(--lq-sub); }
.rb-setb .rb-chev { transition: transform .2s; }
.rb-setb.open .rb-chev { transform: rotate(180deg); }
.rb-setb:hover { filter: brightness(1.15); }
.rb-setp { background: #faf6ec; color: var(--rb-ink); border-radius: 14px; padding: 14px 18px; margin-top: -6px; margin-bottom: 16px; width: calc(100% - 32px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 0 0 1px var(--lq-edge); display: grid; gap: 14px 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rb-setp[hidden] { display: none; }
.rb-sl { font: 800 .62rem 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8b7355; margin-bottom: 6px; }
.rb-sg small { display: block; font-size: .75rem; line-height: 1.35; color: #6d5d4c; margin-top: 5px; }
.rb-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--rb-ink); border-radius: 999px; overflow: hidden; background: #fff; }
.rb-seg button { border: 0; background: none; padding: .38rem .8rem; font: 700 .78rem 'Outfit', sans-serif; cursor: pointer; color: var(--rb-ink); }
.rb-seg button + button { border-left: 1.5px solid var(--rb-ink); }
.rb-seg button.on { background: var(--rb-ink); color: #fff; }
.rb-tog { border: 1.5px solid var(--rb-ink); background: #fff; color: var(--rb-ink); border-radius: 999px; padding: .38rem .8rem; font: 700 .78rem 'Outfit', sans-serif; cursor: pointer; }
.rb-tog.on { background: #fbe7c8; box-shadow: inset 0 0 0 2px #b8893a; }
.rb-tog.on::before { content: '✓ '; }

.rb-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }

/* ---------- the box ---------- */
.rb-box { position: relative; aspect-ratio: 1400 / 944; background: url(bento/img/box.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)) drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.rb-tray { position: absolute; display: flex; flex-direction: column; gap: 3px; }
/* the four trays and the rice, measured on the photo (1400 × 944) */
.rb-tray.t0 { left: 4.07%;  width: 28.5%;  top: 5.72%;  height: 42.6%; }
.rb-tray.t1 { left: 67.29%; width: 29.36%; top: 5.72%;  height: 42.6%; }
.rb-tray.t2 { left: 4.07%;  width: 28.5%;  top: 51.6%;  height: 43.2%; }
.rb-tray.t3 { left: 67.29%; width: 29.36%; top: 51.6%;  height: 43.2%; }
.rb-rice { position: absolute; left: 34.14%; width: 30.86%; top: 5.3%; height: 90.25%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rb-ume { width: 66%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #ff8c7a 0 8%, transparent 16%), radial-gradient(circle at 60% 65%, rgba(80,0,0,.35), transparent 55%), radial-gradient(circle at 40% 35%, #d8323a, #8e1420);
  box-shadow: 0 5px 0 rgba(0,0,0,.12), inset 0 -6px 12px rgba(60,0,0,.35); }
.rb-ume b { font: 900 clamp(2.2rem, 4.6vw, 4.4rem)/1 'Noto Serif JP', serif; color: #fff; }
.rb-kw { margin-top: 12px; background: rgba(255,251,242,.92); color: #5c4a3a; padding: 2px 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.2);
  font: 800 .64rem 'Outfit', sans-serif; letter-spacing: .14em; text-align: center; max-width: 92%; }
.rb-ribbon { position: absolute; top: 5%; right: -4%; background: var(--rb-red); color: #fff; font: 800 .7rem 'Outfit', sans-serif; letter-spacing: .1em; padding: 3px 10px; border-radius: 4px; display: none; }
.rb-rice.done .rb-ribbon { display: block; }

.rb-cell { flex: 1 1 0; min-height: 0; border-radius: 10px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px; }
.rb-cell .k { position: absolute; top: 5px; left: 7px; font: 800 .5rem 'Outfit', sans-serif; letter-spacing: .14em; background: rgba(255,251,242,.85); color: #5c4a3a; padding: 1px 5px; border-radius: 3px; }
.rb-cell .q { font: 700 1.2rem 'Noto Serif JP', serif; color: rgba(255,220,210,.55); }
.rb-cell.full, .rb-cell.missed { background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 6px 14px rgba(0,0,0,.4); animation: rb-pop .35s ease-out; }
.rb-cell.missed { background-image: none !important; background-color: rgba(40,8,6,.55); }
.rb-cell.glow { box-shadow: 0 0 0 4px #3aa17e, inset 0 6px 14px rgba(0,0,0,.3); }
.rb-cell b { background: rgba(255,251,242,.93); color: var(--rb-ink); padding: 1px 9px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.25); font: 700 clamp(.85rem, 1.9vw, 1.3rem) 'Noto Serif JP', serif; }
.rb-cell b small { font-size: .62em; opacity: .8; }
.rb-cell em { font-style: normal; background: rgba(255,251,242,.8); color: #5c4a3a; padding: 0 6px; border-radius: 4px; margin-top: 4px; font: 500 clamp(.55rem, 1.1vw, .72rem) 'Noto Serif JP', serif; }
.rb-cell.missed b { background: rgba(255,235,232,.95); color: #9b1c1c; }
@keyframes rb-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.rb-tray.dense .rb-cell em { display: none; }
.rb-tray.dense .rb-cell .k { top: 3px; left: 5px; }

.rb-legend { display: inline-flex; gap: 6px 14px; flex-wrap: wrap; font-size: .78rem; margin-top: 14px; padding: 6px 14px; border-radius: 999px;
  background: var(--lq-flat); color: var(--lq-text); box-shadow: inset 0 0 0 1px var(--lq-edge2); }
.rb-kt { font: 800 .6rem 'Outfit', sans-serif; background: #fbf4e6; color: #5c4a3a; padding: 1px 5px; border-radius: 3px; text-shadow: none; }
.rb-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rb-lg-empty { background: #5e1510; }
.rb-lg-miss { background: #3a2522; box-shadow: inset 0 0 0 2px var(--rb-red); }

/* ---------- side cards ---------- */
.rb-side { display: grid; gap: 14px; }
.rb-card { background: #fff; color: var(--rb-ink); border-radius: 16px; padding: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.rb-h { margin: 0 0 6px; font: 800 1rem 'Outfit', sans-serif; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rb-h small { font: 700 .76rem 'Outfit', sans-serif; color: #6d6458; }
.rb-in { width: 100%; border: 0; border-bottom: 2.5px solid var(--rb-ink); font: 500 1.5rem 'Noto Serif JP', serif; padding: 4px; background: transparent; outline: none; color: var(--rb-ink); }
.rb-in:focus { border-color: #b8893a; }
.rb-in.no { border-color: var(--rb-red); animation: rb-sh .25s; }
@keyframes rb-sh { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.rb-msg { min-height: 1.6em; margin-top: 8px; font: 700 .95rem 'Noto Serif JP', serif; }
.rb-msg.ok { color: var(--rb-green); } .rb-msg.no { color: var(--rb-red); } .rb-msg.hint { color: #9a6d10; }
.rb-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rb-b { border: 1.5px solid var(--rb-ink); background: #fff; color: var(--rb-ink); border-radius: 999px; padding: .45rem .95rem; font: 800 .78rem 'Outfit', sans-serif; cursor: pointer; }
.rb-b.dark { background: var(--rb-ink); color: #fff; }
.rb-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rb-pk { border: 1.5px solid var(--rb-ink); background: #fffdf7; color: var(--rb-ink); border-radius: 10px; padding: 6px 12px; font: 600 1.15rem 'Noto Serif JP', serif; cursor: pointer; }
.rb-pk.used { opacity: .35; text-decoration: line-through; } .rb-pk.bad { border-color: var(--rb-red); color: var(--rb-red); }
.rb-dish { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f7f3ea; border-radius: 40px 12px 12px 40px; padding: 10px 16px; margin: 4px 0 8px; }
.rb-dish .w { font: 700 2rem 'Noto Serif JP', serif; }
.rb-dish .w .t { color: var(--rb-red); box-shadow: inset 0 -3px 0 var(--rb-red); }
.rb-dish .w rt { font-size: .75rem; color: #8b8273; }
.rb-dish .g { color: #58606a; font-size: .85rem; }
.rb-note { font-size: .78rem; color: #58606a; margin: 6px 0 0; }
.rb-which { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.rb-which select { border: 1.5px solid var(--rb-ink); border-radius: 999px; padding: .32rem .7rem; font: 700 .78rem 'Outfit', sans-serif; background: #fff; color: var(--rb-ink); }
.rb-shelf { display: flex; flex-wrap: wrap; gap: 6px; max-height: 250px; overflow: auto; padding: 2px; }
.rb-shelf button { border: 0; background: #1d1a18; color: #fff; border-radius: 8px; padding: 4px 9px; font: 700 1rem 'Noto Serif JP', serif; cursor: pointer; }
.rb-shelf button small { font: 800 .66rem 'Outfit', sans-serif; color: #f7d774; margin-left: 4px; }
.rb-shelf button.full { background: var(--rb-red); }
.rb-shelf button.cur { outline: 3px solid #f7d774; }
.rb-colophon { margin-top: 26px; font-size: .8rem; line-height: 1.5; padding: 10px 16px; border-radius: 10px; width: calc(100% - 32px);
  background: var(--lq-flat); color: var(--lq-sub); box-shadow: inset 0 0 0 1px var(--lq-edge2); }
.rb-colophon a { color: var(--lq-text); }

/* How it works sits in the side column (between the task and the shelf) unless
   the screen has a wide left margin for it; the knobs need room on both sides. */
.rb-side .howto.is-inline { width: calc(100% - 44px); max-width: none; margin: 0 auto; }
.rb-card { box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 0 0 1px var(--lq-edge2); }

@media (max-width: 880px) {
  .rb-grid { grid-template-columns: 1fr; }
  .rb-plaque h1 { font-size: 1.55rem; }
  .rb-plaque { padding: 14px 14px 12px; }
  .rb-lead { font-size: .9rem; }
  .rb-setb { border-radius: 16px; }
  .rb-setp, .rb-colophon { width: calc(100% - 32px); }
  .rb-cell .k { font-size: .42rem; top: 3px; left: 4px; padding: 0 3px; }
  .rb-cell b { padding: 0 6px; }
  .rb-cell em { display: none; }
  .rb-kw { font-size: .5rem; letter-spacing: .08em; margin-top: 6px; }
}