:root{--bg:#1b1d24;--panel:#14161edb;--ink:#f3f1ea;--muted:#9aa0ad;--accent:#f6b73c;--line:#ffffff14;font-family:Apple SD Gothic Neo,Pretendard,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0}#app{height:100%;position:relative;overflow:hidden}#office{touch-action:none;position:absolute;inset:72px 0 0;overflow:hidden}#canvas{image-rendering:pixelated;image-rendering:crisp-edges;touch-action:manipulation;display:block}#hud{pointer-events:none;align-items:flex-start;gap:8px;display:flex;position:absolute;top:12px;left:12px;right:12px}#hud>*{pointer-events:auto}.card{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:10px;padding:8px 12px;font-size:13px}.clock #clock{letter-spacing:1px;font-variant-numeric:tabular-nums;font-size:22px;font-weight:700}.clock #date,.clock #company,.clock #today,.clock #total{color:var(--muted);font-size:12px}.clock{cursor:pointer}#company{all:unset;white-space:nowrap;display:block}#company:focus-visible{outline:1px solid var(--accent);outline-offset:2px}#cname{color:var(--ink);font-weight:700}#cname:after{content:" ▾";color:var(--muted);font-weight:400}#countdown{color:var(--ink);font-variant-numeric:tabular-nums}#countdown.big{color:var(--accent);font-size:20px;font-weight:700}#notice{pointer-events:none}.flags{display:contents}#hud>.flags{pointer-events:none}.actions{gap:6px;margin-left:auto;display:flex}button{background:var(--panel);color:var(--ink);border:1px solid var(--line);cursor:pointer;border-radius:8px;padding:8px 12px;font-size:13px}button:active{transform:translateY(1px)}#companies{flex-direction:column;gap:2px;width:240px;max-width:calc(100vw - 16px);padding:6px;display:flex;position:absolute;top:calc(100% + 6px);left:0}#company-list{flex-direction:column;gap:2px;display:flex}#companies button{text-align:left;background:0 0;border-color:#0000;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:7px 10px;display:flex}#companies button small{color:var(--muted);font-size:12px}#companies button:not(:disabled):hover{background:#ffffff0f}#companies button:disabled{cursor:default;transform:none}#companies button:disabled:not(.here){color:var(--muted)}#companies button.here,#companies button.here small{color:var(--accent)}#companies #create{border-color:var(--line);justify-content:center;margin-top:4px}#companies>small{color:var(--muted);text-align:center;padding:2px 0;font-size:11px}#bubble{color:#23202a;white-space:nowrap;pointer-events:none;background:#fffdf6;border:2px solid #3a3346;border-radius:6px;margin-top:-10px;padding:4px 8px;font-size:12px;font-weight:600;line-height:1.3;position:absolute;top:0;left:0;box-shadow:0 2px #00000059}#bubble:before,#bubble:after{content:"";left:calc(var(--tail,50%) - 2px);border-style:solid;border-color:#0000;position:absolute}#bubble:before{border-width:8px 6px 0;border-top-color:#3a3346;margin-left:-6px;bottom:-10px}#bubble:after{border-width:5px 4px 0;border-top-color:#fffdf6;margin-left:-4px;bottom:-6px}#bubble.below{margin-top:10px}#bubble.below:before{border-width:0 6px 8px;border-color:#0000 #0000 #3a3346;top:-10px;bottom:auto}#bubble.below:after{border-width:0 4px 5px;border-color:#0000 #0000 #fffdf6;top:-6px;bottom:auto}#acts{left:50%;bottom:calc(14px + env(safe-area-inset-bottom));gap:6px;display:flex;position:absolute;transform:translate(-50%)}#acts button{white-space:nowrap}#acts button:disabled{color:var(--muted);cursor:default;transform:none}#banner{text-align:center;width:max-content;max-width:calc(100% - 32px);color:var(--accent);text-shadow:0 4px 24px #0009;pointer-events:none;font-size:40px;font-weight:800;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}#banner small{color:var(--ink);margin-top:6px;font-size:20px;font-weight:700;display:block}body:has(#banner:not(.hidden)) #bubble{visibility:hidden}.hidden{display:none!important}@media (width<=640px){#hud{align-items:center;top:8px;left:8px;right:8px}#office{top:46px}.clock{border-radius:999px;grid-template-columns:auto auto;align-items:center;column-gap:8px;padding:1.5px 14px 1.5px 12px;display:grid}.clock #date{display:none}.clock #clock{letter-spacing:0;grid-row:span 3;font-size:15px}.clock #company,.clock #today,.clock #total{font-size:11px;line-height:11px}.actions button{padding:6px 10px}.flags{flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;top:42px;left:0;right:0}.flags .card{text-align:center;border-radius:999px;padding:4px 10px;font-size:12px}#countdown.big{font-size:15px}#acts{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;gap:4px;transform:none}#acts button{padding:6px 8px;font-size:12px}#bubble{border-width:1.5px;padding:2px 6px;font-size:11px}}#dpad{display:none}@media (hover:none) and (pointer:coarse){#dpad{pointer-events:none;grid-template:repeat(3,44px)/repeat(3,44px);display:grid;position:absolute;bottom:0;left:calc(100% + 12px)}#dpad button{pointer-events:auto;color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#14161e80;padding:0}#dpad button.on{background:#f6b73c73;transform:none}#dpad button:before{content:"";opacity:.85;width:0;height:0;transform:rotate(var(--r));border:7px solid #0000;border-top-width:0;border-bottom:10px solid;margin:auto;display:block}#dpad [data-key=ArrowUp]{--r:0deg;grid-area:1/2}#dpad [data-key=ArrowLeft]{--r:-90deg;grid-area:2/1}#dpad [data-key=ArrowRight]{--r:90deg;grid-area:2/3}#dpad [data-key=ArrowDown]{--r:180deg;grid-area:3/2}}@media (width<=640px) and (hover:none) and (pointer:coarse){#dpad{bottom:calc(100% + 6px);left:auto;right:0}}