/* Phone round screens, group C, in Puzzle studio: Word Puzzle, Set the Limit,
   Pull the Records, Break the Bot, Read the Room. Tokens and shared parts are
   in base.css and play.css; everything here is specific to these five. */

/* ---- Word Puzzle: a board of heavy square tiles, the live row standing on an edge,
   the keyboard as small cards that keep the colours as memory ---- */
.wstage { position: relative; justify-content: flex-start; gap: 12px; }
.wboard { --tile: 56px; display: grid; gap: 7px; justify-content: center; padding-top: 2px; }
.wrow { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: 7px; }
.wcell { position: relative; height: var(--tile); display: grid; place-items: center; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 27px; line-height: 1; }
.wrow.live .wcell { border-color: var(--line-2); box-shadow: 0 var(--edge-sm) 0 var(--line-2); }
.wrow.live .wcell.typed { border-color: var(--accent); box-shadow: 0 var(--edge-sm) 0 var(--accent); }
.wcell.g { background: var(--ok); border-color: var(--ok); color: var(--white); }
.wcell.a { background: var(--warn); border-color: var(--warn); color: var(--white); }
.wcell.x { background: var(--well); border-color: var(--well); color: var(--ink-3); }
/* A mark as well as a colour: a bar under a letter in the right place, a dot in the top corner
   of one that is in the word elsewhere (off the letter's axis, so an I or a T never reads as "!") */
.wcell.g { padding-bottom: 7px; }
.wcell.g::after, .wcell.a::after { content: ''; position: absolute; background: currentColor; }
.wcell.g::after { left: 50%; bottom: 7px; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 2px; }
.wcell.a::after { top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; }
.wrow.judged .wcell { animation: wturn 360ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.wrow.shake { animation: wshake 320ms ease-in-out both; }
@keyframes wturn { from { transform: rotateX(90deg); } to { transform: none; } }
@keyframes wshake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* The one line under the board: clue, legend or meaning; a toast borrows it for a moment */
.wnote { min-height: 24px; display: flex; justify-content: center; align-items: center; }
.wkey { display: inline-flex; justify-content: center; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.wkey > span { display: inline-flex; align-items: center; gap: 6px; }
.wkey i { position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 5px; }
.wkey i.g { background: var(--ok); } .wkey i.a { background: var(--warn); } .wkey i.x { background: var(--well); border: 1.5px solid var(--line-2); }
.wkey i.g::after, .wkey i.a::after { content: ''; position: absolute; background: var(--white); }
.wkey i.g::after { left: 50%; bottom: 3px; transform: translateX(-50%); width: 10px; height: 2px; border-radius: 1px; }
.wkey i.a::after { top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; }
.toast { display: inline-block; padding: 8px 16px; border-radius: 10px; background: var(--ink); color: var(--white); font-weight: 600; font-size: 14px; white-space: nowrap; }
/* Ten keys across a 390 phone: 6 px at the sides and 4 px between them give each key 34 px,
   under the 44 px floor (as on the phone's own keyboard); wider screens let them grow to 44 */
.keys { padding: 4px 6px 14px; display: grid; gap: 7px; }
.keys > div { display: flex; justify-content: center; gap: 4px; }
.key { position: relative; flex: 1; max-width: 44px; height: 52px; padding: 0; border: 2px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font-weight: 700; font-size: 16px; box-shadow: 0 var(--edge-sm) 0 var(--line-2); margin-bottom: var(--edge-sm); transition: transform .08s, box-shadow .08s; }
.key:active { transform: translateY(var(--edge-sm)); box-shadow: 0 0 0 var(--line-2); }
.key.wide { max-width: 64px; flex: 1.8; font-size: 13px; }
.key.g { background: var(--ok); border-color: var(--ok); color: var(--white); box-shadow: 0 var(--edge-sm) 0 var(--ok-deep); }
.key.a { background: var(--warn); border-color: var(--warn); color: var(--white); box-shadow: 0 var(--edge-sm) 0 #6a4b00; }
.key.x { background: var(--well); border-color: var(--well); color: var(--ink-3); box-shadow: none; transform: translateY(var(--edge-sm)); }
.key.g::after, .key.a::after { content: ''; position: absolute; background: currentColor; }
.key.g::after { left: 50%; bottom: 4px; transform: translateX(-50%); width: 12px; height: 2px; border-radius: 1px; }
.key.a::after { top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; }
.key.g { padding-bottom: 5px; }
.key:disabled { cursor: default; }
/* A phone's visible height is well under its screen height once the browser's bars are in: fit the
   board and the keyboard inside about 640 px so nobody scrolls between guesses */
@media (max-height: 800px) {
  .wstage { gap: 8px; padding-bottom: 6px; }
  .wboard { --tile: 44px; gap: 5px; }
  .wrow { gap: 5px; }
  .wcell { font-size: 23px; border-radius: 10px; }
  .wcell.g { padding-bottom: 5px; }
  .wcell.g::after { bottom: 5px; width: 15px; }
  .wcell.a::after { top: 4px; right: 4px; width: 7px; height: 7px; }
  .keys { padding: 2px 6px 8px; gap: 5px; }
  .key { height: 44px; }
}

/* ---- Set the Limit: thirty days as bars in the round colour on a white card, the stop as a
   line you drag, what each blocked day loses marked above the line, the bad day in red ---- */
.lstage { justify-content: flex-start; gap: 12px; }
.lchart { background: var(--card); border: 2px solid var(--line); border-radius: var(--r-tile); padding: 12px 12px 8px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; touch-action: none; cursor: ns-resize; }
.chart .bars rect { fill: var(--accent); }
.chart .bars rect.over { fill: var(--warn); }
.chart .floor { stroke: var(--line-2); stroke-width: 2; }
.chart .stopline { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
/* A stop above the drawn axis sits on the top edge, dashed */
.chart.is-high .stopline { stroke-dasharray: 7 6; }
.chart.is-high .handle { stroke-dasharray: 4 3; }
.chart .handle { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.chart .bad { fill: var(--red-text); transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.chart .bad.in { transform: none; }
.chart.is-set { cursor: default; }
.lax { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.lread { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.lread .l { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.lread .v { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lread .blk { text-align: right; font-size: 13px; color: var(--ink-3); }
.lread .blk b { display: block; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.lread .blk.some b { color: var(--warn); }
.slider input[type='range'] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.slider input[type='range']:disabled { cursor: default; opacity: .6; }

/* ---- Pull the Records: six file cards to press, each with a pictogram for its kind;
   an opened one lies flat and shows its lines ---- */
.rstage { justify-content: flex-start; }
.recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rec { --c: var(--accent); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 78px; padding: 12px 12px 10px; border: 2px solid var(--line); border-radius: var(--r-tile); background: var(--card); color: var(--ink); text-align: left; box-shadow: 0 var(--edge) 0 var(--c); margin-bottom: var(--edge); transition: transform .08s, box-shadow .08s, background-color .12s; }
.rec:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--c); background: var(--well); }
.rec:disabled { cursor: default; color: var(--ink-3); box-shadow: 0 var(--edge) 0 var(--line); transform: none; }
.rec:disabled .chip { opacity: .45; }
.rec .chip { width: 34px; height: 34px; border-radius: 9px; } .rec .chip svg { width: 17px; height: 17px; }
.rec b { display: block; font-weight: 700; font-size: 14px; line-height: 1.25; }
.rec small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.rec.open { grid-column: 1 / -1; order: -1; display: block; padding: 0; margin-bottom: 0; box-shadow: none; border-color: var(--accent); overflow: hidden; }
.rec.open .rhead { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; }
.rec.open .rhead b { font-size: 15px; }
.rec.open .read { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.rec.open .read svg { width: 14px; height: 14px; }
.rec-line { padding: 8px 12px; font-size: 14px; line-height: 1.4; color: var(--ink); background: var(--paper); border-top: 2px solid var(--line); }
.mine { border: 2px solid var(--line); border-radius: var(--r-tile); background: var(--card); }
.mine summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; border-radius: var(--r-tile); }
.mine summary::-webkit-details-marker { display: none; }
.mine summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; margin-top: -4px; border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: rotate(45deg); transition: transform .15s; }
.mine[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.mine .rec.open { border: 0; border-top: 2px solid var(--line); border-radius: 0; }
.qcount { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.recall { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.recall li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--r-control); background: var(--card); font-size: 14px; }
.recall li .chip { color: var(--white); }
.recall li.ok .chip { background: var(--ok); } .recall li.no .chip { background: var(--red-text); }
.recall li.ok { border-color: var(--ok); }
.recall li > div > span { display: block; color: var(--ink-2); line-height: 1.35; }
.recall li > div > b { display: block; font-size: 15px; margin-top: 3px; }
.recall li > div > small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 3px; }

/* ---- Break the Bot: the bot on white with a slate chip, you in the round colour,
   messages to send as cards, the code in a big chip when it slips ---- */
.bstage { justify-content: flex-start; }
.chat { display: grid; gap: 10px; }
.bubble { position: relative; max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.4; }
.bubble.bot { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 94%; background: var(--card); border: 2px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); }
.bubble.bot b { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.bubble.bot b .lvl { font-weight: 600; white-space: nowrap; }
.bubble.me { justify-self: end; background: var(--accent); color: var(--white); border-bottom-right-radius: 4px; }
.bubble mark { background: var(--ok-soft); color: var(--ok-deep); padding: 0 4px; border-radius: 4px; font-weight: 700; }
.bubble.typing { padding: 12px 14px; }
.bubble.typing .dots { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.bubble.typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: bdot 900ms ease-in-out infinite; }
.bubble.typing .dots i:nth-child(2) { animation-delay: 150ms; } .bubble.typing .dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes bdot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.code { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 2px solid var(--ok); border-radius: var(--r-tile); background: var(--card); box-shadow: 0 var(--edge) 0 var(--ok-deep); margin-bottom: var(--edge); }
.code .chip { background: var(--ok); }
.code small { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.code b { display: block; font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1.1; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.answers[data-cards] .opt.slim { --c: var(--accent); min-height: 56px; }
.own { display: grid; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 2px solid var(--line); }
.fake-input { width: 100%; min-height: 64px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r-control); background: var(--card); font-size: 16px; resize: none; }
.fake-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.fake-input::placeholder { color: var(--ink-3); }

/* ---- Read the Room: the options as cards, then how the room split as chunky bars in the option colours ---- */
.step { font-weight: 700; font-size: 15px; color: var(--ink); }
.split { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.split li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: 'chip text pct' 'bar bar bar'; gap: 8px 10px; align-items: center; padding: 10px 12px 12px; border: 2px solid var(--line); border-radius: var(--r-tile); background: var(--card); }
.split li .chip { grid-area: chip; }
.split li .tx { grid-area: text; font-size: 14px; font-weight: 600; line-height: 1.25; }
.split li .tx small { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.split li .pc { grid-area: pct; display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.split li .pc svg { width: 20px; height: 20px; }
/* Your guess is named beside its mark */
.split li .pc small { font: 600 13px/1 var(--body); color: var(--ink-3); margin-left: 4px; }
.split li.top .pc small { color: var(--ok); } .split li.off .pc small { color: var(--red-text); }
.split li.top .pc svg { color: var(--ok); } .split li.off .pc svg { color: var(--red-text); }
.split li .bar { grid-area: bar; height: 22px; border-radius: 6px; }
.split li .bar i { border-radius: 6px; }
.split li.top { border-color: var(--ok); } .split li.top .pc { color: var(--ok); } .split li.top .tx small { color: var(--ok); }
.split li.off { border-color: var(--red-text); }