/* sahne · the sims.turkse.pizza design system on a 390x694 stage */
html{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#1b1a2e;box-sizing:border-box;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body{margin:0;height:100%;position:relative;overflow:hidden;font-family:Palatino,"Palatino Linotype",Georgia,serif;color:#f5efe3}
*,*::before,*::after{box-sizing:border-box}
/* the space around the stage on tall phones: the same painting, blurred and dimmed, edge to edge (behind the safe areas too) */
#backdrop{position:fixed;inset:-40px;background:#1b1a2e center/cover no-repeat;filter:blur(18px) brightness(.45) saturate(1.1);pointer-events:none}
.phone{width:390px;height:694px;overflow:hidden;position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% - var(--lift,0px))) scale(var(--k,1));background:#2c2a4a;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:transform .25s}
.phone,.phone *{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;user-select:text;-webkit-user-select:text}

/* ---- the scene ---- */
#scene{position:absolute;inset:0;z-index:0;filter:var(--tint,none)}
#scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
#daywash{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:0;background:linear-gradient(to bottom,rgba(150,200,255,.85),rgba(170,210,255,.5) 22%,rgba(255,226,170,.28) 45%,rgba(255,226,170,.08) 80%)}
#daywash.warm{background:linear-gradient(to bottom,rgba(255,150,110,.7),rgba(255,190,120,.25) 40%,rgba(255,190,120,0) 70%)}
#glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.5s;background:radial-gradient(ellipse 60% 30% at 50% 47%,rgba(242,211,91,.55),rgba(242,211,91,0) 70%)}
.hospital #scene{filter:var(--tint,none) saturate(.3) brightness(1.2) sepia(.15) hue-rotate(120deg)}
#ward{position:absolute;inset:0;z-index:3;display:none;pointer-events:none;background:linear-gradient(rgba(220,240,235,.35),rgba(220,240,235,.12) 50%,rgba(220,240,235,.3))}
#ward span{position:absolute;left:50%;top:104px;transform:translateX(-50%);padding:6px 14px;border-radius:10px;background:#f5efe3;color:#a8322e;border:2px solid #a8322e;font-size:17px;white-space:nowrap}
.hospital #ward{display:block}

/* placeholder scenes, used when a painting is missing: a swirling night and a floor */
.ph{position:absolute;inset:0}
.ph.sky{background:radial-gradient(circle at 80% 9%,#f2d35b 0 22px,rgba(242,211,91,.35) 23px 34px,transparent 35px),radial-gradient(circle at 18% 6%,rgba(242,211,91,.8) 0 5px,transparent 9px),radial-gradient(circle at 42% 12%,rgba(242,211,91,.8) 0 4px,transparent 8px),radial-gradient(ellipse 50% 9% at 40% 18%,rgba(140,170,230,.45),transparent 70%),radial-gradient(ellipse 40% 7% at 70% 24%,rgba(120,150,220,.4),transparent 70%),linear-gradient(#1d2a6b,#2b4a9a 30%,#2c2a4a 31%)}
.ph.street{background:linear-gradient(160deg,transparent 0 54%,#7b6a58 54% 80%,#4f4552 80%),linear-gradient(#1d2a6b 0 22%,#264a8c 22% 56%,transparent 56%)}
.ph.club,.ph.jam,.ph.home{background:linear-gradient(transparent 0 16%,#5b4636 16% 44%,#8a6440 44% 88%,#3f5a3a 88%)}
.ph.club::after{content:"";position:absolute;left:25%;right:15%;top:22%;height:22%;background:linear-gradient(90deg,#7a1820,#a8323a,#7a1820);border-radius:4px}
.ph.jam::after{content:"";position:absolute;left:20%;right:20%;top:52%;height:16%;border-radius:50%;background:radial-gradient(#9a2c2c,#5a1a20)}
.ph.home::after{content:"";position:absolute;left:12%;width:30%;top:44%;height:10%;background:#d9d0c0;border-radius:6px}

/* ---- people: toy figures, anchored at the feet ---- */
#people{position:absolute;inset:0;z-index:4;pointer-events:none}
.fig{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;min-width:44px;display:flex;flex-direction:column;align-items:center;transition:left 1.4s ease-in-out,top 1.4s ease-in-out,opacity 1.2s}
.fig.enter{opacity:0}
.fig img{display:block;height:var(--h,88px);width:auto;filter:var(--tint,none) drop-shadow(0 3px 2px rgba(40,25,10,.45));-webkit-user-drag:none;pointer-events:none}
.fig.flip img,.fig.flip .toy{transform:scaleX(-1)}
.fig .tag{font-size:12px;line-height:1;padding:2px 6px;margin-bottom:3px;border-radius:8px;background:rgba(27,26,46,.7);white-space:nowrap}
.fig.me .tag{color:#1b1a2e;background:#f2d35b}
.fig.onstage:not(.me):not(.told) .tag{visibility:hidden}
.fig.told{z-index:999!important}
.fig.told .tag{font-size:14px;padding:4px 8px;background:rgba(27,26,46,.92);border:1px solid #f2d35b;color:#f5efe3}
.fig.walking img,.fig.walking .toy{animation:trot .32s ease-in-out infinite}
@keyframes trot{0%,100%{translate:0 0}50%{translate:0 -1.5px}}
.toy{position:relative;width:34px;height:var(--h,88px);filter:var(--tint,none)}
.toy i{position:absolute;display:block}
.toy .hd{left:8px;top:0;width:18px;height:20px;border-radius:50% 50% 45% 45%;background:#e8b98e}
.toy .hr{left:6px;top:-2px;width:22px;height:10px;border-radius:10px 10px 4px 4px;background:var(--hair,#2b211c)}
.toy .bd{left:3px;top:20px;width:28px;height:36%;border-radius:9px 9px 5px 5px;background:var(--top,#6c86a8)}
.toy .lg{left:7px;top:calc(20px + 36%);width:20px;bottom:5px;border-radius:3px;background:var(--leg,#2f3550)}
.toy .ft{left:4px;bottom:0;width:26px;height:7px;border-radius:4px;background:#5a3a24}
.toy .inst{left:-6px;top:44%;width:38px;height:13px;border-radius:7px;background:#b5652a;transform:rotate(-18deg)}
.toy.drums .inst{left:-14px;top:auto;bottom:6px;width:60px;height:30px;border-radius:50%;background:radial-gradient(#f5efe3 0 45%,#8a2020 46%);transform:none}
.toy.mic .inst{left:30px;top:22%;width:3px;height:74%;border-radius:2px;background:#222;transform:none}
/* a CSS instrument for performers whose face has no painted playing pose */
.prop{position:absolute;display:block;pointer-events:none;filter:var(--tint,none) drop-shadow(0 2px 1px rgba(40,25,10,.4))}
.prop.guitar,.prop.bass{left:calc(50% - 15px);bottom:calc(var(--h,88px) * .3);width:34px;height:18px}
.prop.guitar::before,.prop.bass::before{content:"";position:absolute;left:0;bottom:0;width:16px;height:14px;border-radius:50% 46% 50% 50%;background:radial-gradient(circle at 55% 50%,#1b1a2e 0 2px,#e8a848 3px,#b5652a 6px,#5a2a12 9px);transform:rotate(-20deg)}
.prop.guitar::after,.prop.bass::after{content:"";position:absolute;left:12px;bottom:7px;width:21px;height:3px;border-radius:2px;background:#3a2414;transform:rotate(-30deg);transform-origin:left center}
.prop.bass::before{background:radial-gradient(circle at 55% 50%,#1b1a2e 0 2px,#c43a32 3px,#8a2020 7px,#4a1010 9px)}
.prop.bass::after{width:25px}
.prop.drums{left:50%;bottom:-3px;width:50px;height:32px;transform:translateX(-50%)}
.prop.drums::before{content:"";position:absolute;left:12px;bottom:0;width:27px;height:27px;border-radius:50%;background:radial-gradient(#f5efe3 0 52%,#8a2020 56% 80%,#d8c9a8 84%)}
.prop.drums::after{content:"";position:absolute;right:0;bottom:2px;width:16px;height:30px;background:linear-gradient(#e0b84a,#e0b84a) 50% 100%/2px 26px no-repeat,radial-gradient(ellipse 8px 2px at 50% 3px,#e8c45a 90%,transparent)}
.need{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);width:26px;height:26px;border-radius:50%;background:#f5efe3;border:2px solid #f2d35b;display:flex;align-items:center;justify-content:center;animation:bob 2.4s ease-in-out infinite;pointer-events:none}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -3px}}

/* ---- captions ---- */
.say{position:absolute;transform:translate(-50%,-100%);padding:6px 12px;border-radius:14px;background:rgba(27,26,46,.82);color:#f5efe3;font-size:17px;line-height:1.25;white-space:normal;text-align:center;width:max-content;pointer-events:none;z-index:30;opacity:0;transition:opacity .5s;max-width:280px}
.say.on{opacity:1}
.say b{color:#f2d35b;font-weight:normal}
#moment{font-size:16px;border:2px solid #f2d35b;z-index:31}
#toast{left:195px;top:250px;font-size:16px;white-space:normal;text-align:center;width:max-content;max-width:330px;z-index:45;border:1px solid rgba(242,211,91,.5);background:rgba(27,26,46,.96)}
.dots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.dots span{width:8px;height:8px;border-radius:50%;background:rgba(245,239,227,.25)}
.dots span.on{background:#f2d35b}
.dots span.half{background:linear-gradient(90deg,#f2d35b 50%,rgba(245,239,227,.25) 50%)}
.stars{white-space:nowrap;letter-spacing:1px;font-size:17px}
.stars i{font-style:normal;color:rgba(245,239,227,.25)}
.stars i.on{color:#f2d35b}
.stars i.half{background:linear-gradient(90deg,#f2d35b 50%,rgba(245,239,227,.25) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- HUD ---- */
#hud{position:absolute;left:0;right:0;top:0;height:58px;z-index:20;pointer-events:none}
#hud>*{pointer-events:auto}
#wallet{position:absolute;left:12px;top:10px;font-size:18px;color:#f5efe3;text-shadow:0 1px 3px rgba(0,0,0,.6);display:flex;gap:4px;align-items:baseline;pointer-events:none}
#wallet .cur{color:#f2d35b}
#meters{position:absolute;left:6px;top:28px;padding:8px 6px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:44px;min-height:44px;cursor:pointer}
.meter{display:flex;gap:2px;align-items:center}
.meter i{display:flex;margin-right:3px}
.meter span{width:6px;height:6px;border-radius:50%;background:rgba(27,26,46,.45);box-shadow:0 0 0 1px rgba(242,211,91,.25)}
.meter span.on{background:#f2d35b}
#clock{position:absolute;left:50%;top:8px;transform:translateX(-50%);height:44px;padding:0 12px;border-radius:14px;background:rgba(27,26,46,.82);border:2px solid #f2d35b;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;white-space:nowrap}
#clock .t{font-size:17px}
#clock .s{font-size:11px;color:#f2d35b;letter-spacing:.5px}
#bell{position:absolute;right:10px;top:8px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;transition:transform .2s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
#bell:active{transform:scale(.9)}
#next{position:absolute;left:70px;right:70px;top:58px;text-align:center;font-size:13px;color:#f5efe3;text-shadow:0 1px 3px rgba(0,0,0,.8);z-index:20;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

/* ---- chat ---- */
#chatlog{position:absolute;left:10px;right:10px;top:80px;z-index:19;display:none;flex-direction:column;gap:2px;padding:6px 10px;border-radius:14px;background:rgba(27,26,46,.6);font-size:14px;line-height:1.3;pointer-events:none}
#chatlog.on{display:flex}
#chatlog div{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#chatlog b{color:#f2d35b;font-weight:normal}
#chatlog .me b{color:#9fc0ff}
#chatform{position:absolute;left:10px;right:10px;bottom:76px;height:44px;z-index:21;display:none;gap:6px}
#chatform.on{display:flex}
#chatform input{flex:1;min-width:0;height:44px;border-radius:14px;border:2px solid #f2d35b;background:rgba(27,26,46,.88);color:#f5efe3;padding:0 12px;font-size:17px;outline:none}
#chatform input::placeholder{color:rgba(245,239,227,.5)}
#chatform button{width:72px;height:44px;border-radius:14px;background:#f2d35b;color:#1b1a2e;font-size:15px}

/* ---- banner and ticker ---- */
#banner{position:absolute;left:30px;right:30px;top:160px;z-index:22;display:none;flex-direction:column;gap:8px;align-items:stretch}
#banner.on{display:flex}
#ticker{position:absolute;left:30px;right:30px;top:152px;z-index:18;display:none;justify-content:space-between;align-items:center;padding:6px 12px;border-radius:14px;background:rgba(27,26,46,.82);font-size:14px}
#ticker.on{display:flex}
#ticker b{color:#f2d35b;font-weight:normal}
#ticker>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ticker .pct{white-space:nowrap;margin-left:8px}
#ticker small{font-size:12px;color:rgba(245,239,227,.7)}

/* ---- pills, tiles, chips ---- */
.pill{width:100%;max-width:330px;margin:0 auto;min-height:44px;padding:9px 14px;border-radius:14px;background:rgba(27,26,46,.88);border:2px solid #f2d35b;color:#f5efe3;font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}
.pill .sub{font-size:14px;color:#f2d35b;white-space:nowrap;text-align:right}
.pill.on{background:#f2d35b;color:#1b1a2e}
.pill.on .sub{color:#1b1a2e}
.pill.off{opacity:.45}
.pill.back{justify-content:flex-start;width:auto;max-width:none;margin:0;padding:0 14px}
.tiles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tile{width:72px;min-height:64px;border-radius:14px;background:rgba(27,26,46,.85);border:2px solid #f2d35b;color:#f5efe3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:15px;text-align:center;padding:4px;cursor:pointer;line-height:1.1}
.tile small{font-size:11px;color:#f2d35b}
.tile.on{background:#f2d35b;color:#1b1a2e}
.tile.on small{color:#1b1a2e}
.tile.off{opacity:.45}
.chip{min-height:44px;padding:0 14px;border-radius:22px;border:2px solid #f2d35b;background:rgba(27,26,46,.85);display:inline-flex;align-items:center;gap:6px;font-size:15px}
.chip.on{background:#f2d35b;color:#1b1a2e}

/* ---- the bottom bar ---- */
#bar{position:absolute;left:6px;right:6px;bottom:8px;height:62px;z-index:23;display:flex;justify-content:space-between}
#bar button{position:relative;width:52px;height:62px;border-radius:14px;background:rgba(27,26,46,.85);border:2px solid #f2d35b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;line-height:1}
#bar button:active{transform:scale(.94)}
#bar button.dot::after{content:"";position:absolute;right:4px;top:4px;width:9px;height:9px;border-radius:50%;background:#e2584a;box-shadow:0 0 0 2px #1b1a2e}

/* ---- sheets ---- */
#sheet{position:absolute;left:0;right:0;bottom:0;height:540px;z-index:40;background:#1b1a2e;box-shadow:0 -8px 24px rgba(0,0,0,.45);border-top:2px solid #f2d35b;border-radius:18px 18px 0 0;transform:translateY(105%);transition:transform .3s ease;display:flex;flex-direction:column}
#sheet.open{transform:translateY(0)}
#sheet.tall{height:640px}
#sheet .grab{height:18px;flex:none;display:flex;justify-content:center;align-items:center;touch-action:none}
#sheet .grab::after{content:"";width:44px;height:4px;border-radius:2px;background:rgba(242,211,91,.6)}
#sheet .body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 24px;touch-action:pan-y}
.sh-head{display:flex;align-items:center;gap:10px;margin:2px 0 12px;position:sticky;top:0;background:#1b1a2e;padding:4px 0 8px;z-index:2}
.sh-head h2{font-size:20px;font-weight:normal;margin:0;color:#f2d35b;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec{margin:16px 0 8px;font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:#f2d35b}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid rgba(242,211,91,.15);font-size:15px;min-height:36px}
.row .r{color:#f2d35b;white-space:nowrap}
.note{font-size:14px;line-height:1.4;color:rgba(245,239,227,.8);margin:6px 2px}
.bar2{height:8px;border-radius:4px;background:rgba(245,239,227,.15);overflow:hidden;position:relative;flex:none;width:110px}
.row>span:first-child{flex:1;min-width:0}
.bar2 i{position:absolute;left:0;top:0;bottom:0;background:#f2d35b;border-radius:4px}
.bar2 em{position:absolute;top:-2px;bottom:-2px;width:2px;background:#f5efe3;opacity:.7}
.field{width:100%;height:44px;border-radius:14px;border:2px solid #f2d35b;background:rgba(27,26,46,.88);color:#f5efe3;padding:0 12px;font-size:17px;outline:none}
.stepper{display:flex;align-items:center;justify-content:center;gap:14px;font-size:22px}
.stepper button{width:44px;height:44px;border-radius:50%;border:2px solid #f2d35b;font-size:22px;color:#f2d35b}
.paper{border:1px solid rgba(242,211,91,.4);border-radius:12px;padding:12px 14px;margin:8px 0;background:rgba(245,239,227,.05)}
.paper h3{margin:0 0 6px;font-weight:normal;font-size:16px;color:#f2d35b}
.paper p{margin:0;font-size:15px;line-height:1.45}
.entry{font-size:15px;line-height:1.4;padding:6px 2px;border-bottom:1px solid rgba(242,211,91,.1)}
.entry time{color:#f2d35b;font-size:13px;margin-right:6px}
.entry.friend{color:rgba(245,239,227,.75);font-style:italic}

/* ---- creation ---- */
.creating #hud,.creating #bar,.creating #next,.creating #chatlog,.creating #chatform,.creating #banner,.creating #people{display:none!important}
#create{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;padding:52px 20px 20px;gap:12px;background:linear-gradient(rgba(27,26,46,.25),rgba(27,26,46,.88) 38%)}
#create.on{display:flex}
#create h1{font-size:54px;font-weight:normal;margin:0;color:#f2d35b;letter-spacing:2px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#create .tag{font-size:15px;margin:-6px 0 6px;text-shadow:0 1px 4px rgba(0,0,0,.8);text-align:center}
#create label{align-self:flex-start;font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:#f2d35b;margin-top:4px}
#create .figs{display:flex;gap:6px;justify-content:center}
#create .figs button{width:52px;height:84px;border-radius:12px;border:2px solid rgba(242,211,91,.35);background:rgba(27,26,46,.6);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding-bottom:3px}
#create .figs button.on{border-color:#f2d35b;background:rgba(242,211,91,.25)}
#create .figs img{height:76px;width:auto}
#create .figs .toy{--h:74px;transform:scale(.9)}
#create .fine{font-size:12px;opacity:.7;text-align:center;margin-top:auto}

/* ---- effects ---- */
.leaf{position:absolute;width:7px;height:7px;border-radius:50% 0;pointer-events:none;animation:drift 1.4s ease-out forwards;z-index:29}
@keyframes drift{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),-50px) rotate(200deg)}}
#pulse{position:absolute;left:0;right:0;bottom:0;height:3px;background:#f2d35b;opacity:0;z-index:50;pointer-events:none;transition:opacity .08s}
.tile small.cut{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip small{font-size:12px;opacity:.8}