*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Yu Gothic",sans-serif;color:#34383e}body{background-color:#fff8e8;background-image:radial-gradient(circle,#e6bf823d 1.5px,transparent 1.5px);background-size:24px 24px}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #779cad;outline-offset:4px}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}
main{width:min(100%,600px);height:100svh;height:100dvh;min-height:0;margin:auto;padding:16px 20px 24px;display:flex;flex-direction:column;justify-content:center;position:relative}.toolbar{position:absolute;top:12px;right:20px;display:flex;justify-content:flex-end}.settings-button{display:grid;place-items:center;width:40px;height:40px;padding:9px;border:0;background:transparent;color:#947564}.settings-button svg{width:22px;height:22px;pointer-events:none}header{text-align:center;margin-bottom:24px}h1{font-size:42px;font-weight:900;letter-spacing:.08em;color:#ea7058;margin:0 0 10px}header p{font-size:15px;font-weight:700;margin:0}
.counter{background:#e3c7a0;border:1px solid #c9aa80;border-bottom:7px solid #bb9669;border-radius:20px;padding:24px 20px;box-shadow:0 8px 20px #3e443b12}.ingredients{display:grid;grid-template-columns:repeat(5,56px);justify-content:center;gap:12px}.ingredients button,.drag-card{display:grid;place-items:center;width:56px;height:64px;padding:0;line-height:1;letter-spacing:0;font-size:28px;font-weight:700;background:#fff;border:2px solid #d1d8dd;border-radius:12px;color:#34383e;user-select:none;-webkit-user-select:none;touch-action:none}.ingredients button{box-shadow:0 3px 0 #bbc0c0,0 5px 8px #573f331c}.ingredients button[aria-pressed=true]{border-color:#e78860;box-shadow:0 3px 0 #e78860}.kitchen{display:flex;align-items:center;justify-content:center;gap:42px;margin-top:28px}.prep,.fryer{display:grid;place-items:center}.dish{width:154px;height:108px;display:grid;place-items:center;border:7px solid #b9c3ca;border-radius:12px;background:#f4f1e6;box-shadow:inset 0 0 0 3px #e2e7e9,0 4px 7px #573f3326;cursor:pointer}.dish span{display:grid;place-items:center;width:54px;height:54px;padding:0;margin:0;font-size:42px;font-weight:900;line-height:1;paint-order:stroke fill;transition:color .5s}.dish.coated span{color:#96958e;-webkit-text-stroke:7px #f4f1e6;text-shadow:3px 3px 0 #e6e2d8,-3px 2px 0 #f4f1e6;animation:batter-dip .9s ease-in-out}.dish.drop-ready{outline:4px solid #edaa62;outline-offset:5px}.fryer{position:relative;isolation:isolate}.oil{position:relative;width:154px;height:154px;display:grid;place-items:center;border:9px solid #424950;border-radius:50%;background:#e8b550;box-shadow:0 4px 8px #573f3333}.oil:before,.oil:after{content:"";position:absolute;top:calc(50% - 13px);width:22px;height:26px;border:6px solid #424950;border-radius:7px;z-index:-1}.oil:before{left:-26px}.oil:after{right:-26px}.oil>span{z-index:1}.bubbles{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff5 2px,transparent 4px) 0 0/24px 24px;opacity:0}.oil.frying>span{animation:bob .3s infinite alternate}.frying .bubbles{opacity:1;animation:bob .35s infinite alternate}.tempura-piece{display:block;width:54px;height:32px;border-radius:45%;background:#f9d27a;border:3px solid #e7aa44;box-shadow:inset 0 0 0 3px #ffdf9c}
.drag-card{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 8px 20px #49354b33;border-color:#ed8066}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
dialog{width:min(380px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:18px;padding:30px;background:#fffdf8;color:#34383e;text-align:center;box-shadow:0 20px 70px #49354b30}dialog::backdrop{background:#30292080}dialog h2{margin:0 0 20px;font-size:22px}dialog button:not(.settings-button):not(.switch){background:#ed8066;color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:700}.review-close{position:absolute;top:6px;right:6px}#result{padding:40px 24px 24px}.stars{display:flex;align-items:center;justify-content:center;gap:5px}.stars svg{width:30px;height:30px;fill:#efa832}.stars svg.unfilled{fill:#ddceb1}#result-text{margin:18px 0 0;font-size:15px;line-height:1.7;color:#68503e}#result-clear{margin-top:20px}.reviewer-crop{width:150px;height:116px;overflow:hidden;margin:0 auto 18px;position:relative}.reviewer-crop img{display:block;width:150px;height:auto;max-width:none;pointer-events:none}.reviewer-crop[data-expression=happy] img{width:176px;margin-left:-13px}.reviewer-crop[data-expression=sad] img{width:162px;margin-left:-6px}.result-card{width:180px;height:290px;margin:0 auto;perspective:600px}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}.result-card.back .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border-radius:7px;backface-visibility:hidden;display:grid;place-items:center}.card-front{background:#fff;border:2px solid #bcc8d0;box-shadow:inset 0 0 0 7px #fff,inset 0 0 0 8px #e1e7eb}.card-back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#78bac0 0 7px,#92cbd0 7px 14px);border:2px solid #5499a1;box-shadow:inset 0 0 0 6px #fffdf7}.card-review{width:100%;display:grid;justify-items:center;gap:14px;padding:18px 12px}.card-review p{margin:0;font-size:13px;line-height:1.7}.card-review .stars{gap:3px}.card-review .stars svg{width:25px;height:25px}.card-review .reviewer-crop{width:140px;height:106px;margin:0}.card-review .reviewer-crop img{width:140px}.card-review .reviewer-crop[data-expression=happy] img{width:166px;margin-left:-13px}.card-review .reviewer-crop[data-expression=sad] img{width:152px;margin-left:-6px}
#save-ingredient{cursor:inherit;user-select:none;-webkit-user-select:none;touch-action:none}
@keyframes bob{to{transform:translateY(-3px)}}@keyframes batter-dip{0%{transform:translateY(-8px);color:#34383e;-webkit-text-stroke:0 transparent;text-shadow:none}35%{transform:translateY(6px);color:#96958e;-webkit-text-stroke:7px #f4f1e6}70%{transform:translateY(6px)}100%{transform:translateY(0)}}
@media(max-width:480px){main{padding:16px 16px 20px}.toolbar{right:16px}h1{font-size:36px}.counter{padding:22px 12px;border-radius:16px}.ingredients{grid-template-columns:repeat(5,44px);gap:8px}.ingredients button{width:44px;height:56px;font-size:26px}.kitchen{gap:28px;margin-top:26px}.dish{width:126px;height:98px}.oil{width:124px;height:124px;border-width:8px}.oil:before,.oil:after{width:18px;border-width:5px}.oil:before{left:-23px}.oil:after{right:-23px}}
@media(max-height:520px){main{padding-top:10px;padding-bottom:10px}header{margin-bottom:14px}h1{font-size:30px;margin-bottom:6px}.counter{padding-top:14px;padding-bottom:14px}.ingredients button{height:44px}.ingredients{gap:8px}.kitchen{margin-top:18px}.dish{height:82px}.oil{width:108px;height:108px}dialog{padding-top:22px;padding-bottom:18px}.result-card{height:260px}.card-review{gap:10px}}
@media(max-width:350px){.dish{width:112px}.kitchen{gap:22px}.oil{width:112px;height:112px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

main{justify-content:center;gap:24px}header{margin:0;flex-shrink:0}.counter{width:100%;margin:0}#save-result{margin-top:24px;touch-action:none}#result{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 32px)}@media(max-width:480px){main{gap:20px}}@media(max-height:520px){main{gap:12px}header{margin:0}}

/* Puzzle text must not reveal interactions through text selection. */
body{user-select:none;-webkit-user-select:none}input,textarea,[contenteditable=true]{user-select:text;-webkit-user-select:text}

html,body,main,main *,dialog,dialog *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}input,textarea,[contenteditable=true],[contenteditable=true] *{user-select:text;-webkit-user-select:text}

.result-card{cursor:pointer;touch-action:manipulation}.card-inner{transition:transform .3s ease}

.word-material{cursor:inherit;touch-action:none}main footer{display:flex;justify-content:center}#restart{border:0;background:transparent;color:#947564;font-size:12px;padding:8px 16px}.card-back p{margin:12px;padding:14px;background:#fffdf8;color:#34383e;font-size:13px;line-height:1.8}#clear-title{font-size:20px;margin:20px 0 12px}#clear-message{font-size:14px;line-height:1.8;margin:0}.reviewer-crop[data-expression=full] img,.reviewer-crop[data-expression=overfull] img{width:150px;margin-left:0}.card-review .reviewer-crop[data-expression=full] img,.card-review .reviewer-crop[data-expression=overfull] img{width:140px;margin-left:0}@media(max-height:600px){main{gap:12px}header{margin:0}.counter{padding-top:16px;padding-bottom:16px}.ingredients button{height:48px}.kitchen{margin-top:16px}}
/* Satisfaction stays within the tabletop and does not grow with each meal. */
.satisfaction{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:13px;color:#614b36}
.satisfaction strong{font-size:22px;color:#b45137}.satisfaction small{font-size:11px}
.satisfaction progress{flex:1;width:0;height:10px;accent-color:#ed8066;border:0;border-radius:8px;overflow:hidden;background:#f7ecd9}
.satisfaction progress::-webkit-progress-bar{background:#f7ecd9}
.satisfaction progress::-webkit-progress-value{background:#ed8066;border-radius:8px}
.satisfaction progress::-moz-progress-bar{background:#ed8066;border-radius:8px}
#satisfaction-gain{font-size:13px;font-weight:700;color:#b45137;margin:16px 0 0}
#rest-message{font-size:14px;line-height:1.7;margin:14px 0 0;color:#68503e}
.result-card{cursor:default;touch-action:auto}.card-inner{transition:none}
.card-front{overflow:hidden}.card-review{position:relative;z-index:1}
#hint-through{position:absolute;inset:18px 12px;margin:0;display:flex;align-items:center;font-size:17px;line-height:2.2;transform:scaleX(-1);opacity:.09;pointer-events:none;color:#38626a}
@media(max-width:480px){.satisfaction{gap:10px;margin-top:14px}}
@media(max-height:600px){.satisfaction{margin-top:12px}}

#final-satisfaction{font-size:20px;font-weight:700;color:#b45137;margin:18px 0 0}

main>.satisfaction{width:min(100%,360px);align-self:center;margin-top:0;flex-shrink:0}

/* The reverse is plain paper; only its heading shows through the front. */
.card-back{background:#fff;border:2px solid #bcc8d0;box-shadow:inset 0 0 0 7px #fff,inset 0 0 0 8px #e1e7eb;align-items:start}
.hint-content{width:100%;padding:26px 18px}
.hint-content h2{font-size:20px;line-height:1.4;margin:0 0 20px}
.card-back #back-hint{background:none;padding:0;margin:0;font-size:13px;line-height:1.8}
#hint-through{inset:26px 12px auto;display:block;font-size:20px;font-weight:700;line-height:1.4;opacity:.12}

.reviewer-crop[data-expression=clear]{height:164px}.reviewer-crop[data-expression=clear] img{width:150px;margin-left:0}



main{row-gap:16px}
.eaten-history{width:min(100%,360px);align-self:center;flex-shrink:0}
.eaten-history h2{font-size:12px;font-weight:700;color:#947564;margin:0 0 6px;text-align:left}
.eaten-foods{font-size:14px;line-height:1.6;color:#614b36;margin:0;min-height:23px;text-align:left}

.kitchen{margin-top:18px}
@media(max-width:480px){.kitchen{margin-top:18px}}
@media(max-height:600px){main{row-gap:10px}.kitchen{margin-top:12px}}



.eaten-history{display:flex;align-items:baseline;gap:12px;min-height:23px}
.eaten-history h2{flex-shrink:0;margin:0;line-height:1.6}
.eaten-history .eaten-foods{flex:1;min-width:0;min-height:23px;overflow-wrap:anywhere}

.puzzle-nav{position:absolute;top:12px;right:20px;font-size:15px;line-height:1.6}
.puzzle-nav a{display:block;padding:8px 0;color:#947564;text-underline-offset:3px}
@media(max-width:480px){.puzzle-nav{right:16px}}
@media(max-height:600px){.puzzle-nav{top:2px}main{padding-top:42px}}

/* Raise the heading within the space above the tabletop without moving the board. */
main>header{transform:translateY(calc(-1 * clamp(0px,calc(20dvh - 110px),42px)))}

/* Make the mirrored hint heading easier to notice through the front. */
#hint-through{font-size:22px;opacity:.24}
.hint-content h2{font-size:22px}

/* Keep the heading aligned with the front; center the hint body on the card. */
.hint-content{height:100%;position:relative}
.card-back #back-hint{position:absolute;top:50%;left:18px;right:18px;transform:translateY(-50%);text-align:center}

.card-back #back-hint{white-space:pre-line;word-break:normal;overflow-wrap:normal}

#clear-hint{margin:20px 0 0;padding-top:16px;border-top:1px solid #e8ddcf;font-size:13px;line-height:1.8;color:#806852}

/* Improve readability of navigation and restart without changing other labels. */
.puzzle-nav a,#restart{color:#68503e}

/* Switch paper faces directly: avoid 3D back-face rendering differences. */
.result-card{perspective:none}
.card-inner,.result-card.back .card-inner{transform:none;transform-style:flat}
.card-face{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}
.result-card:not(.back) .card-back,.result-card.back .card-front{display:none}
.result-card:not(.back) .card-front,.result-card.back .card-back{display:grid}

/* touch-action does not apply to ordinary inline spans. */
.word-material{display:inline-block;touch-action:none;-webkit-user-drag:none}

.puzzle-nav a .word-material{text-decoration-line:underline;text-underline-offset:3px}




/* Enlarge draggable text hit areas without moving the surrounding text. */
.word-material{position:relative;z-index:1;padding:12px;margin:-12px}

/* Keep native text selection and tap highlights from revealing drag hit areas. */
.word-material,.word-material *,[data-material]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.puzzle-nav a{-webkit-tap-highlight-color:transparent}