/* Legacy layout foundations; Frost Bloom's visual language lives in atelier-ui.css. */
:root {
  --cream: #fff7f2;
  --cream-2: #f9e7e7;
  --cream-3: #edcbd2;
  --paper: rgba(255, 250, 246, .96);
  --paper-solid: #fffaf6;
  --caramel: #dc728c;
  --caramel-2: #d76681;
  --caramel-d: #a94363;
  --cocoa: #714c57;
  --ink: #513c48;
  --ink-2: #77616c;
  --line: rgba(150, 89, 113, .2);
  --line-2: rgba(150, 89, 113, .34);
  --ok: #4d927a;
  --ok-bg: #e2f5ee;
  --ok-line: rgba(77, 146, 122, .55);
  --primary: linear-gradient(160deg, #f38ca4, #d95e7d);
  --shadow: 0 5px 14px #76516324, 0 2px 3px #7651631a;
  --bar-shadow: 0 6px 0 #d89cad, 0 10px 24px #7952612b;
}

html, body {
  background: #f8e8e5;
  color: var(--ink);
}

/* Ingredients and serving supplies sit at the edge of the work surface. */
.counter-still-life { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.counter-still-life.is-hidden { display:none; }
.counter-bowl {
  position:absolute; left:max(8px, calc(50% - 620px)); top:25%; width:116px; height:76px;
  border:9px solid #fff9f1; border-radius:50%;
  background:radial-gradient(ellipse at 50% 38%,#f8decb 0 34%,#c98d90 72%,#b57a83);
  box-shadow:0 10px 17px #61475035, inset 0 4px 7px #865b6538, 0 0 0 2px #dfabb5;
  transform:rotate(-18deg);
}
.counter-bowl .fruit { position:absolute; object-fit:contain; filter:drop-shadow(1px 3px 1px #754e6270); }
.counter-bowl .strawberry { width:46px; height:43px; top:8px; left:18px; transform:rotate(-25deg); }
.counter-bowl .kiwi { width:42px; height:42px; top:17px; left:55px; transform:rotate(25deg); }
.counter-bowl .berry { width:23px; height:23px; top:0; left:61px; }
.counter-napkin {
  position:absolute; right:max(8px, calc(50% - 620px)); top:21%;
  width:100px; height:88px; padding:14px 8px 0;
  background:linear-gradient(145deg,#fffef8,#f6e7dc);
  border:1px solid #e9c9be; border-radius:4px;
  box-shadow:3px 8px 14px #77515a32;
  color:#bc7892; text-align:center; font-size:12px; font-weight:900; letter-spacing:.12em;
  transform:rotate(13deg);
}
.counter-napkin:after { content:"";position:absolute;right:0;bottom:0;border-left:25px solid transparent;border-top:25px solid #edd8ca;box-shadow:-2px -2px 3px #a9788326; }
.counter-napkin img { display:block; width:34px; height:27px; object-fit:contain; margin:4px auto; }
.counter-milk {
  position:absolute; right:max(30px, calc(50% - 595px)); top:39%;
  width:64px; height:84px; border:5px solid #f8f3e8; border-radius:15px 15px 12px 12px;
  background:linear-gradient(95deg,#cce9e1,#fffdf1 42%,#d2e9df);
  box-shadow:4px 9px 12px #6d526143, inset 4px 0 3px #ffffffa8;
  transform:rotate(9deg);
}
.counter-milk:before {content:"";position:absolute;left:12px;top:-15px;width:30px;height:16px;border-radius:5px 5px 0 0;background:#fff8ed;box-shadow:inset 0 3px #d6a9b6;}
.milk-cap {position:absolute;left:13px;top:-20px;width:28px;height:7px;border-radius:3px;background:#e9a6b8;}
.milk-label {display:block;margin:25px 4px 0;padding:3px 0;background:#f6bfd0;border-radius:4px;color:#745369;text-align:center;font-size:9px;font-weight:900;line-height:1.05;letter-spacing:.08em;}
@media (max-width:699px) and (orientation:portrait) {
  .counter-bowl {top:19%;left:-53px;transform:scale(.8) rotate(-18deg);}
  .counter-napkin {top:19%;right:-65px;transform:scale(.8) rotate(13deg);}
  .counter-milk {top:32%;right:-43px;transform:scale(.8) rotate(9deg);}
}

.ui, .gallery, dialog.sheet, dialog.viewer {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "PingFang SC", "Noto Sans CJK JP", sans-serif;
}

.topbar {
  top: calc(var(--sat) + 9px);
  left: calc(var(--sal) + 11px);
  right: calc(var(--sar) + 11px);
}

.mascot-btn {
  width: 48px;
  height: 48px;
  border: 3px solid #fff9f2;
  border-radius: 16px;
  background: #f4bed0;
  box-shadow: 0 3px 0 #d984a2, 0 7px 15px #75485835;
  transform: rotate(-7deg);
}

.mascot {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  filter: none;
}

.bubble {
  margin-left: 10px;
  padding: 8px 14px;
  border: 2px solid #efb4c4;
  border-radius: 18px 18px 18px 5px;
  background: #fffdf8f5;
  color: #684759;
  box-shadow: 0 4px 0 #ecc6d0, 0 8px 18px #7150601c;
  font-weight: 800;
}

.bubble:before { background: #fffdf8; border-color: #efb4c4; }
.bubble[data-kind=tip] { background: #fff7df; border-color: #ecc8a0; }
.bubble[data-kind=tip]:before { background: #fff7df; border-color: #ecc8a0; }

.past-btn {
  border: 2px solid #f4b2c3;
  border-radius: 17px;
  background: #fffaf6;
  color: #90526c;
  box-shadow: 0 4px 0 #e4a6b8, 0 8px 16px #80576b29;
}
.past-btn .ic { color: #bb5e80; }
.past-count { background: #d75c7d; }

.dock {
  gap: 8px;
}
.dock:before {
  border: 1.5px solid #e9bfcb;
  border-radius: 18px;
  background: #fff7f3d9;
  box-shadow: 0 4px 0 #e8c3cf;
  backdrop-filter: none;
}

.atelier-tag {
  position: absolute;
  z-index: 5;
  top: -23px;
  right: 10px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px 3px;
  border: 1.5px solid #e99bb2;
  border-radius: 9px 9px 3px 9px;
  background: #fff7f0;
  color: #b65375;
  box-shadow: 2px 3px 0 #e6a3b7;
  transform: rotate(4deg);
  pointer-events: none;
  white-space: nowrap;
}
.atelier-tag span { font-size: 13px; font-weight: 900; letter-spacing: .07em; }
.atelier-tag small { font-size: 7px; font-weight: 900; letter-spacing: .13em; }

.dock .tools.bar {
  gap: 6px;
  padding: 7px;
  border: 2px solid #e9a9ba;
  border-radius: 22px;
  background: #fff9f3f2;
  box-shadow: var(--bar-shadow);
  backdrop-filter: none;
}

.dock .tool {
  min-height: 62px;
  padding: 4px 3px;
  gap: 1px;
  border: 1.5px solid #f1d4d9;
  border-radius: 15px;
  background: #fff;
  color: #684a59;
  box-shadow: inset 0 1px #fff, 0 2px 0 #ead2d6;
  transform: translateY(0);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.dock .tool:nth-child(even):not([aria-checked=true]) { transform: translateY(2px); }
.dock .tool:hover:not([aria-checked=true]) { background: #fff1f5; }
.dock .tool[aria-checked=true] {
  border-color: #d97897;
  background: #fbd8e2;
  color: #733f59;
  box-shadow: inset 0 2px #fff7f8, 0 3px 0 #d87897;
  transform: translateY(-2px);
}
.dock .tool .kururin-ic { width: 32px; height: 32px; flex: none; }
.opt .photo-art, .dock .photo-art {
  display:block;
  width:31px;
  height:31px;
  object-fit:contain;
  filter:drop-shadow(0 2px 1px #7c536047);
}
.dock .tool-lbl { font-size: 12px; font-weight: 900; line-height: 1.1; letter-spacing: .015em; }

.dock .tray {
  border: 2px dashed #deb0bc;
  border-radius: 20px;
  background: #fffdf8f0;
  box-shadow: 0 4px 0 #efd5da, 0 7px 18px #75506125;
  backdrop-filter: none;
}
.dock .tray-cap { color: #73525f; font-weight: 800; }
.dock .pane-ic .kururin-ic { width: 30px; height: 30px; }
.dock .opt { border-radius: 13px; }
.dock .opt:hover:not([aria-checked=true]) { background: #fff0f4; }
.dock .opt[aria-checked=true] { background: #ffe7ee; box-shadow: 0 0 0 2.5px #d97695, 0 3px 7px #704d602a; }

.dock .round-btn {
  border: 2px solid #efbdca;
  border-radius: 17px;
  background: #fffaf6;
  color: #855b69;
  box-shadow: 0 3px 0 #dcb2be, 0 6px 10px #75485824;
}
.dock .round-btn:hover:not([aria-disabled=true]) { background: #fff0f4; }
.dock .gauge, .dock .roll-chip {
  border: 1.5px solid #a8d5c7;
  background: #eaf8f1;
  color: #4f756a;
  box-shadow: 0 3px 0 #a9d7c6;
}
.dock .gauge-line { stroke: #619c89; }
.dock .gauge-fill { fill: #c9eee2; }
.dock .roll-chip.has { color: #a34e6d; background: #fff0f4; border-color: #e5b0c0; box-shadow: 0 3px 0 #ecc6d2; }
.dock .roll-chip .kururin-ic { width: 22px; height: 22px; }

.btn, .dock .btn {
  border: 1.5px solid #eab7c5;
  border-radius: 16px;
  background: #fffaf6;
  color: #744e60;
  box-shadow: 0 3px 0 #e7bdc7;
}
.btn.primary, .dock .btn.primary {
  border-color: #c85b7c;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 0 #a84968, 0 7px 15px #86556833;
}
.btn.primary[aria-disabled=true], .btn.primary:disabled { background: #d9c4c9; border-color: #c6aeb5; box-shadow: 0 3px 0 #bda9ae; }
.seg-btn[aria-checked=true] { background: #f7d5e1; color: #6f4960; }

.result {
  border: 2px solid #eab6c4;
  border-radius: 23px;
  background: #fffaf6f8;
  box-shadow: 0 5px 0 #d69aad, 0 15px 28px #6f4a5a36;
}
.result-title { color: #70445b; }
.verdict-tag { border-radius: 999px; }

dialog.sheet {
  border: 2px solid #e8aebf;
  border-bottom: 0;
  background: #fff9f6;
  color: #604654;
  box-shadow: 0 -8px 0 #eac1ce, 0 -16px 30px #67475c32;
}
dialog.sheet::backdrop { background: #5e3d5273; }

/* The gallery is a dessert scrapbook, separate from the reference's museum wall. */
.gallery {
  --g-ivory: #604353;
  --g-ivory-2: #826572;
  --g-gold: #cf809a;
  --g-gold-hi: #eeacc0;
  --g-hair: rgba(193, 116, 149, .25);
  --g-serif: "Hiragino Maru Gothic ProN", "PingFang SC", sans-serif;
  background: radial-gradient(circle at 18% 12%, #ffffffa8 0 1px, transparent 2px) 0 0 / 24px 24px, #f8e9e7;
  color: #604353;
}
.g-page, .g-detail {
  background: radial-gradient(circle at 18% 12%, #ffffffb5 0 1px, transparent 2px) 0 0 / 24px 24px, linear-gradient(160deg, #fff5f1, #f5e2e8);
}
.g-page:before, .g-detail:before { background: none; }
.g-inner:before, .g-inner:after { display: none; }
.g-head { background: #fffaf6f5; border-bottom: 2px solid #e8b4c4; box-shadow: 0 5px 0 #efd0d9; }
.g-back { color: #a35772; background: #fff1f4; box-shadow: inset 0 0 0 2px #e9b7c6; }
.g-title { color: #7b4864; font-weight: 900; letter-spacing: .08em; }
.g-count { color: #a55874; }
.g-wall { background: transparent; }
.g-item:before, .g-empty:before, .g-exhibit:before {
  top: 9px;
  width: 82px;
  height: 15px;
  border-radius: 3px;
  background: #f3a8bcaa;
  box-shadow: 0 1px 2px #69445730;
  transform: translateX(-50%) rotate(-5deg);
}
.g-item:after, .g-empty:after, .g-exhibit:after { background: none; }
.g-frame:before {
  border-radius: 8px;
  background: #fffaf5;
  box-shadow: 0 10px 25px #7953663b, inset 0 0 0 3px #fff, inset 0 0 0 5px #eab5c4;
}
.g-frame:after { background: none; }
.g-mat { background: #fbe9e9; box-shadow: inset 0 0 0 2px #f3cdd7; }
.g-photo { background: #fff; box-shadow: 0 0 0 3px #fff, 0 4px 12px #86627330; }
.g-plaque {
  border: 1px solid #e5b4c2;
  border-radius: 8px;
  background: #fffaf6;
  color: #624455;
  box-shadow: 0 4px 0 #ebc9d2, 0 8px 16px #78546625;
}
.g-plaque:before { background: none; }
.g-no, .g-plaque-name, .g-plaque-date, .g-plaque-facts { color: #624455; }
.g-foot { background: #fceef0; border-top: 2px dashed #dfa8b9; box-shadow: none; }
.g-scope { color: #876e78; }
.g-cta, .g-more { border: 2px solid #d989a3; border-radius: 16px; background: #fffaf6; color: #8f536e; box-shadow: 0 4px 0 #e8bdca; }
.g-actions { border-color: #e6bac8; }
.g-act { color: #845168; }
.g-act+.g-act { border-color: #e6bac8; }

/* One compact control cabinet leaves the whole left side for making ice. */
@media (min-width: 900px) and (min-height: 640px) {
  :root { --workshop-panel: clamp(312px, 28vw, 382px); }
  #scene { right:auto; width:calc(100% - var(--workshop-panel)); }
  .counter-still-life { right:var(--workshop-panel); }
  .counter-napkin, .counter-milk { display:none; }
  .topbar { right:calc(var(--workshop-panel) + 14px); }
  .past-btn {
    position:absolute; z-index:4; top:19px; right:18px;
    width:calc(var(--workshop-panel) - 36px); min-height:51px;
    flex-direction:row; gap:9px; font-size:13px;
  }
  .dock, .decor-dock.dock {
    position:absolute; inset:0 0 0 auto; z-index:2;
    width:var(--workshop-panel); height:100%;
    display:flex; flex-direction:column; gap:12px;
    padding:82px 14px 16px; overflow:hidden;
    border-left:3px solid #e7b1bd;
    background:linear-gradient(155deg,#fff9f3 0%,#f8e6e8 58%,#e4f2ec 100%);
    box-shadow:-12px 0 30px #6c4b5d28;
    pointer-events:auto;
  }
  .dock:before { display:none; }
  .dock .atelier-tag { display:none; }
  .dock .tools.bar, .decor-dock .tools.bar {
    order:1; position:static; width:100%; min-height:0;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px; padding:8px; transform:none;
  }
  .dock .tool { min-height:63px; }
  .dock .tray, .decor-dock .tray {
    order:2; position:static; flex:1 1 auto; min-height:118px;
    width:100%; height:auto; max-height:none;
    padding:12px 9px; transform:none; overflow-y:auto; overflow-x:hidden;
  }
  .dock .tray .pane.on { width:100%; flex-direction:column; align-items:stretch; }
  .dock .tray .opts, .dock .tray .opts.grid2 {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr));
    grid-template-rows:none; grid-auto-flow:row; grid-auto-columns:auto;
    width:100%; align-self:stretch; justify-items:center; justify-content:stretch; max-height:none;
    gap:7px; overflow:visible;
  }
  .dock .actions, .decor-dock .actions {
    order:3; position:static; display:flex; flex-wrap:wrap;
    align-items:center; justify-content:center;
    flex:none; width:100%; padding:9px 4px 2px;
    margin:0; border:0; border-top:1px dashed #d8a7b7;
    transform:none; pointer-events:auto;
  }
  .dock .actions .grow { flex-basis:100%; height:0; }
  .dock .actions .go { margin:0; }
  .dock .actions .round-btn { min-height:42px; }
  .dock .actions .btn { min-height:42px; }
}

@media (max-width: 699px) and (orientation: portrait) {
  .dock .tools.bar { gap: 3px; padding: 5px; border-radius: 19px; }
  .dock .tool { min-height: 54px; padding: 3px 1px; border-radius: 12px; }
  .dock .tool .kururin-ic { width: 27px; height: 27px; }
  .dock .tool-lbl { font-size: 11px; }
  .dock .tray { height: 58px; padding: 5px; }
  .atelier-tag { display: none; }
}

@media (max-width: 380px) {
  .dock .tools.bar { gap: 2px; padding: 4px; }
  .dock .tool .kururin-ic { width: 24px; height: 24px; }
  .atelier-tag small { display: none; }
  .bubble { padding: 6px 9px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .dock .tool, .dock .tool:nth-child(even):not([aria-checked=true]) { transition: none; transform: none; }
}