:root{
  --gold-0:#fff3b0;
  --gold-1:#f4d56a;
  --gold-2:#d6ad34;
  --gold-3:#b88716;
  --gold-4:#7a5200;
  --gold-5:#3b2600;
  --ink:#201500;
  --paper:#f3cd58;
  --paper-2:#ddb33a;
  --cream:#fff7d2;
  --danger:#8f2230;
  --radius:16px;
  --shadow:0 12px 30px rgba(70,42,0,.34);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{color-scheme:light}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 10%,rgba(255,250,198,.98) 0 6%,rgba(255,233,120,.72) 7%,transparent 22%),
    radial-gradient(circle at 82% 14%,rgba(255,247,196,.95) 0 5%,rgba(255,222,86,.62) 6%,transparent 20%),
    radial-gradient(circle at 50% 120%,rgba(255,243,181,.5) 0 22%,transparent 46%),
    linear-gradient(140deg,#5a3200 0%,#9b6200 10%,#ffdb57 24%,#fff5b0 33%,#d49100 44%,#7b4500 56%,#e4af14 68%,#fff0a1 79%,#b67800 90%,#412300 100%);
  background-attachment:fixed;
  display:flex;flex-direction:column;align-items:center;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.26;background:repeating-linear-gradient(115deg,transparent 0 18px,rgba(255,255,255,.24) 19px,transparent 20px 38px);z-index:-1}
body:after{content:"";position:fixed;left:-15%;right:-15%;top:-10%;height:34vh;pointer-events:none;opacity:.45;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.72) 0,rgba(255,255,255,.35) 22%,transparent 58%);filter:blur(14px);z-index:-1}
button,select,input{font:inherit}
.app-header{width:min(1100px,100%);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;position:relative;background:linear-gradient(180deg,#fff2a8 0%,#ffd54c 22%,#cb8e05 58%,#8f5900 100%);border-bottom:2px solid #754600;box-shadow:0 8px 24px rgba(72,42,0,.28), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -2px 0 rgba(94,54,0,.38)}
.brand{display:flex;align-items:center;gap:10px}.logo{width:44px;height:44px;object-fit:cover;border-radius:12px;border:1px solid #7b5000;box-shadow:0 4px 10px rgba(63,37,0,.36),inset 0 1px rgba(255,255,255,.5);filter:drop-shadow(0 2px 3px rgba(80,48,0,.45))}
h1{font-size:21px;font-weight:900;margin:0;color:#4a2e00;letter-spacing:.2px;text-shadow:0 1px #fff8d8,0 0 8px rgba(255,242,176,.9),0 2px 2px rgba(112,67,0,.25)}
.header-actions{display:flex;align-items:center;gap:5px}
.icon-btn,.status-icon{border:1px solid #8c650f;background:linear-gradient(180deg,#fff6c2 0%,#ffd95e 28%,#e4ab12 62%,#8f5900 100%);color:#3a2500;font-size:23px;padding:8px;cursor:pointer;border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.8), inset 0 -2px rgba(107,67,0,.35), 0 6px 14px rgba(83,49,0,.24)}
.icon-btn:hover,.status-icon:hover{filter:brightness(1.05)}.status-icon.offline{font-size:18px;color:#7b160d;border-color:#8f4d00;background:#ffd06a}
.menu{position:absolute;right:18px;top:64px;width:min(350px,calc(100vw - 24px));max-height:calc(100vh - 80px);overflow-y:auto;background:linear-gradient(165deg,#fff4b9 0%,#ffd552 18%,#e5aa12 52%,#9b6400 100%);border:2px solid #704800;border-radius:18px;box-shadow:0 22px 46px rgba(66,37,0,.52), inset 0 1px 0 rgba(255,255,255,.78);padding:14px;display:none;z-index:2000}
.menu.open{display:block}.menu-section{margin-bottom:10px}.menu-label{font-size:12px;color:#4c3000;font-weight:750}
.field{width:100%;padding:10px;border:1px solid #815a08;border-radius:10px;margin-top:6px;background:#fff1b2;color:#271900;outline:none}.field:focus{border-color:#3e2800;box-shadow:0 0 0 2px rgba(69,42,0,.14)}
.menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.utility-actions .donate-btn{grid-column:1 / -1;background:linear-gradient(180deg,#ffe8ef 0%,#ffb7ca 24%,#d94773 64%,#8c193a 100%);border-color:#7b1736;color:#fff;font-weight:900;text-shadow:0 1px rgba(75,0,20,.4)}
.btn{border:1px solid #654200;border-radius:12px;padding:10px 12px;background:linear-gradient(180deg,#fff4bc 0%,#ffda5e 26%,#dca111 64%,#7f4c00 100%);color:#372100;cursor:pointer;transition:.15s ease;box-shadow:inset 0 1px rgba(255,255,255,.82), inset 0 -2px rgba(96,57,0,.36),0 5px 12px rgba(84,51,0,.22)}.btn:hover{filter:brightness(1.06)}
.btn.primary{background:linear-gradient(180deg,#fff8c7 0%,#ffe171 28%,#efb516 62%,#935c00 100%);border-color:#654200;color:#2a1b00;font-weight:900;text-shadow:0 1px rgba(255,255,255,.38)}.btn.primary:hover{filter:brightness(1.04)}
.btn.danger{background:linear-gradient(180deg,#a93a47,#761e2a);border-color:#5f1420;color:#fff}.btn.compact{padding:8px 10px;font-size:13px}.btn:disabled{opacity:.55;cursor:not-allowed}
.last-result{font-size:13px;color:#3f2900;padding:7px 4px;font-weight:700}
.menu-card{margin:11px 0;padding:11px;border:1px solid #8a620e;border-radius:12px;background:linear-gradient(180deg,rgba(255,242,173,.75),rgba(219,174,58,.72));box-shadow:inset 0 1px rgba(255,255,255,.4)}.menu-card-title{font-weight:800;color:#3e2800;margin-bottom:6px}
.sound-row{display:flex;align-items:center;gap:9px;padding:5px 1px;color:#30200a;cursor:pointer}.sound-row input{width:20px;height:20px;accent-color:#704706;flex:none}
.exit-sheet{z-index:5000}.exit-body{width:min(92vw,380px)}.exit-body p{margin:0;color:#3d2600}
.status-text{font-size:12px;color:#4e3400;margin:4px 0 8px;line-height:1.35}.status-text[data-state="ok"]{color:#1f5a24}.status-text[data-state="warn"]{color:#744200}.status-text[data-state="error"]{color:#8a1722}
.folder-hint{font-size:11px;color:#563900;line-height:1.35;margin-bottom:8px}.folder-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.folder-actions .primary{grid-column:1 / -1}
hr{border:none;border-top:1px solid #8a620e;margin:13px 0}
.app-main{width:min(1100px,calc(100% - 20px));background:linear-gradient(155deg,rgba(255,244,185,.98) 0%,rgba(255,221,93,.98) 18%,rgba(229,172,16,.97) 48%,rgba(145,90,0,.98) 100%);border:2px solid #6f4800;border-radius:var(--radius);box-shadow:0 22px 52px rgba(62,35,0,.42),inset 0 1px rgba(255,255,255,.72),inset 0 -2px rgba(99,58,0,.34);padding:16px;margin:12px 10px 20px;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}

.app-main:before{content:"";position:absolute;left:-8%;right:-8%;top:-28px;height:90px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 18%,rgba(255,255,255,.68) 50%,rgba(255,255,255,.18) 82%,transparent 100%);transform:rotate(-4deg);pointer-events:none;opacity:.85}
.tools{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.icon-circle{width:50px;height:50px;border-radius:50%;border:2px solid #684300;background:radial-gradient(circle at 32% 24%,#fffdea 0 12%,#fff2a7 13%,#ffd85e 42%,#d69400 70%,#7f4d00 100%);color:#281900;font-size:22px;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 2px 4px rgba(255,255,255,.72), inset 0 -2px 3px rgba(104,58,0,.38), 0 6px 12px rgba(79,46,0,.27)}.icon-circle:hover{filter:brightness(1.06)}.timer{margin-left:6px;color:#3d2700;font-weight:800;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff6c9,#efc54d);border:1px solid #8b610b;padding:7px 10px;border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.65)}
#boardWrap{position:relative}.board{width:clamp(260px,78vw,640px);height:clamp(260px,78vw,640px);border-radius:16px;border:3px solid #684300;background:#2d1c00;display:grid;overflow:hidden;position:relative;box-shadow:0 0 0 4px #f8d25a,0 0 0 8px rgba(121,73,0,.35),0 10px 26px rgba(61,35,0,.38)}
.cell{border:1px dashed #9b7628;background:#3b2600;background-size:cover;background-position:center}.cell.drop{outline:3px dashed #ffe58a;outline-offset:-3px}
.piece{width:100px;height:100px;border-radius:8px;border:3px solid #6a4700;background-size:cover;background-position:center;margin:6px;cursor:grab;flex:0 0 auto;box-shadow:0 3px 8px rgba(0,0,0,.35)}.piece:active{cursor:grabbing;transform:scale(1.03)}
.tray{width:100%;min-height:120px;border-radius:14px;border:2px dashed #775000;margin-top:14px;padding:8px;display:flex;overflow-x:auto;background:linear-gradient(180deg,#fff2ae 0%,#f0c33c 26%,#c8870b 100%);box-shadow:inset 0 1px rgba(255,255,255,.55)}
.overlay{position:absolute;inset:0;background:rgba(53,32,0,.94);color:#fff8d5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;text-align:center;z-index:10}.overlay[hidden]{display:none}.overlay img{max-width:92%;max-height:70%;border-radius:12px;border:4px solid #f3cf59}
.app-footer{font-size:13px;margin-bottom:18px;color:#3e2800;text-align:center;padding:7px 14px;background:linear-gradient(180deg,rgba(255,245,196,.9),rgba(234,190,52,.82));border-radius:12px;font-weight:700;box-shadow:inset 0 1px rgba(255,255,255,.55)}.app-footer a{color:#492d00;font-weight:800}
.sheet{position:fixed;inset:0;background:rgba(53,30,0,.72);display:grid;place-items:center;z-index:3000;padding:12px}.sheet[hidden]{display:none}.sheet-body{width:min(94vw,900px);max-height:94vh;overflow:auto;background:linear-gradient(155deg,#fff7c7 0%,#ffe07a 22%,#dba015 58%,#8f5a00 100%);border:2px solid #654100;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 48px rgba(56,31,0,.52),inset 0 1px rgba(255,255,255,.78), inset 0 -2px rgba(96,57,0,.34)}
.sheet-title{margin:0;color:#3d2600}.crop-help{font-size:13px;line-height:1.4;background:#fff1b3;border:1px solid #8a5e08;border-radius:10px;padding:9px;color:#4c3000}.crop-body{align-items:stretch}
.sheet-row{display:flex;gap:8px;align-items:center}.sheet-row select{flex:1;background:#fff2b9;color:#2f1e00;border:1px solid #765000;border-radius:9px;padding:8px}.sheet-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.sheet-note{padding:10px;border:1px dashed #844800;border-radius:10px;background:#ffd477;color:#5a2f00}
#video{width:100%;max-height:70vh;border-radius:12px;background:#241600;border:2px solid #7f5600}#peekSheet img{max-width:90vw;max-height:80vh;border-radius:12px;border:3px solid #805700}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:5000;background:linear-gradient(180deg,#5c3b00,#342100);border:1px solid #ffd76a;color:#fff6ce;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);max-width:min(90vw,520px);text-align:center;font-size:13px}.toast[hidden]{display:none}
.ranking-sheet-body{width:min(96vw,980px)}.ranking-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.ranking-section{background:rgba(255,244,183,.7);border:1px solid #865d08;border-radius:12px;padding:10px}.ranking-section h3{margin:0 0 8px;color:#412900}.table-wrap{width:100%;overflow:auto;border-radius:10px}.score-table{width:100%;border-collapse:collapse;min-width:620px;background:#fff2b8;color:#281900}.score-table th,.score-table td{padding:9px 8px;border-bottom:1px solid #c89d30;text-align:left;white-space:nowrap}.score-table th{position:sticky;top:0;background:#8b5b00;color:#fff4c1;z-index:1}.score-table tbody tr:nth-child(even){background:#f0cf6f}.score-table tbody tr:first-child{font-weight:800;background:#ffe990}.empty-ranking{padding:16px;text-align:center;color:#674400}.ranking-card .btn{width:100%}
@media (max-width:600px){.app-header{padding:10px 12px}.logo{width:38px;height:38px;border-radius:10px}h1{font-size:19px}.app-main{padding:11px}.menu{right:10px;top:58px}.piece{width:86px;height:86px}.score-table{min-width:560px}.sheet-actions .btn{flex:1 1 100%}}