:root{color-scheme:light;--ink:#193b38;--sub:#4d6862;--line:#cfe0d7;--paper:#fffefa;--teal:#21695e;--pale:#e7f4ed;--gold:#87501a;--shadow:0 8px 24px #183d3010;font:15px/1.55 system-ui,"Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(ellipse at 3% 0,#cce9df,transparent 52%),radial-gradient(ellipse at 100% 5%,#f5e5c4,transparent 46%),#f6f7ef}
#app{width:min(100% - 24px,1100px);margin:20px auto 70px}
#app.viewer{max-width:1020px}
h1,h2,h3,h4{line-height:1.3;margin:.25em 0 .5em}
h1{font-size:clamp(24px,4vw,36px)} h2{font-size:21px} h3{font-size:17px}
p{margin:.4rem 0 .65rem}
a{color:#205f55;text-underline-offset:3px}
button,.button,input,textarea,select{font:inherit}
button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.45rem .8rem;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#f0f7f2;cursor:pointer;text-decoration:none;text-align:center}
button:hover,.button:hover{border-color:#609889;background:#e4f2eb}
button:disabled{opacity:.6;cursor:wait}
.primary,[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:white}
.primary:hover,[aria-pressed=true]:hover{background:#18564c;color:white}
.amber{background:#8b4b13;color:white;border-color:#8b4b13}.amber:hover{background:#703b0e;color:white}
.danger{color:#9b302b;background:#fff2ee}
input,textarea,select{min-width:0;width:100%;padding:.55rem .7rem;border:1px solid #b8d4c8;border-radius:9px;background:#fff;color:var(--ink)}
input[type=checkbox]{width:1.05rem;height:1.05rem;vertical-align:middle;margin-inline:.5rem}
label{display:block;font-weight:600;margin:.35rem 0 .65rem}
label>input:not([type=checkbox]),label>textarea,label>select{display:block;margin-top:.25rem;font-weight:400}
textarea{resize:vertical;min-height:5rem}
:focus-visible{outline:2px solid #367f70;outline-offset:2px}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.between{justify-content:space-between}
.stack{display:grid;gap:.45rem}.stack .row input{flex:1 1 120px}
.panel,.hero,.site-head{padding:clamp(13px,2.3vw,22px);border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow);margin-bottom:.75rem;min-width:0}
.hero,.site-head{background:linear-gradient(110deg,#e0f1e8,#fff9e9)}
.site-head .site-links{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.brand img{width:46px;height:46px;object-fit:cover;border-radius:12px}.brand span{display:grid}.brand small{color:var(--sub)}
.page-content{min-height:45vh}
.muted,small{color:var(--sub)}.error{color:#9b302b}
.hint,.rules,.empty{display:block;padding:.65rem .85rem;border:1px solid var(--line);border-radius:10px;background:var(--pale);margin:.65rem 0}
.rules{background:#fff7e6;border-color:#ead29b;color:#684318}.rules p{margin:.3rem 0}.rules .button{margin-top:.45rem}
.empty{text-align:center;color:var(--sub);background:#f7faf7}
.chips,.actions{display:flex;gap:.45rem;flex-wrap:wrap;margin:.6rem 0}
.chips button{border-radius:22px;padding:.25rem .8rem;min-height:38px}
.actions>*{flex:1 1 135px;min-height:44px;font-weight:700}
.viewer>.actions>*:nth-child(1){background:#265e88;color:white}
.viewer>.actions>*:nth-child(2){background:#915419;color:white}
.viewer>.actions>*:nth-child(3){background:#21695e;color:white}
.search{margin-bottom:.65rem;flex-wrap:nowrap}.search input{flex:1}.search select{max-width:9rem}
.games-grid,.reward-grid,.detail-sections,.metrics{display:grid;gap:.65rem}
.games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.game-card{border:1px solid var(--line);background:var(--paper);border-radius:15px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.game-card img,.cover-placeholder{width:100%;aspect-ratio:1;object-fit:cover;object-position:center;display:block}
.cover-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#a6d2c4,#e1eedf);font-size:3rem}
.game-card>div:not(.cover-placeholder){padding:.65rem}
.game-card h3{overflow-wrap:anywhere}.game-card p{color:var(--sub);font-size:.85rem}
.card-arrow{float:right;color:var(--teal);font-weight:800}
.tag,.limit{background:#e8f3eb;color:#29584e;border-radius:6px;padding:.16rem .4rem}
.detail-head{display:flex;gap:1rem;align-items:center;margin-bottom:.8rem}
.game-icon{width:clamp(80px,25vw,150px);aspect-ratio:1;object-fit:cover;border-radius:14px}
.detail-sections{grid-template-columns:repeat(2,minmax(0,1fr))}
.prose{white-space:pre-wrap;overflow-wrap:anywhere}.qr,.instruction{display:block;max-width:min(100%,400px);max-height:50vh;object-fit:contain;margin:.65rem auto}
.code{margin:.4rem 0;padding:.3rem .55rem;background:var(--pale);border-radius:8px;overflow-wrap:anywhere}
.reward-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,145px),1fr))}
.reward-card{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;min-height:100px;min-width:0;background:linear-gradient(155deg,#fffef9,#f2f8f4);padding:.6rem;overflow-wrap:anywhere}
.reward-card strong{color:var(--gold);font-size:1.06rem}.reward-card b{font-size:.9rem}.reward-card small{font-size:.78rem}
.reward-card .limit{background:#f6e8c7;color:#705025}.detail-link{font-size:.78rem;color:#21695e;font-weight:700;margin-top:.1rem}
.activity+.activity{margin-top:1.4rem}.rewards{display:grid;gap:.35rem;padding-left:1.25rem;overflow-wrap:anywhere}
.floating{position:fixed;right:16px;bottom:max(18px,env(safe-area-inset-bottom));box-shadow:var(--shadow)}
dialog{width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 28px);margin:auto;border:1px solid var(--line);border-radius:15px;padding:1rem;color:var(--ink);background:var(--paper);overscroll-behavior:contain;overflow:auto}
dialog::backdrop{background:#132b2b82}dialog header{margin-bottom:.6rem}
footer{color:var(--sub);text-align:center;padding:1rem 0}.bottom-nav{display:none}
.admin{display:grid;grid-template-columns:210px minmax(0,1fr);gap:1rem}
.sidebar{display:grid;gap:.35rem;align-content:start;position:sticky;top:15px;height:max-content;border-radius:14px;padding:.8rem;background:var(--paper);border:1px solid var(--line)}
.sidebar strong{margin-bottom:.4rem}.sidebar button,.sidebar a{justify-content:flex-start}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .8rem}
.subpanel{border:1px solid var(--line);background:#f7faf7;border-radius:10px;padding:.65rem;margin:.55rem 0}
.image-preview{display:flex;gap:.45rem;align-items:center}.image-preview img{width:70px;height:70px;object-fit:contain;background:#eef5ef;border-radius:8px}
.record{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--line);padding:.5rem 0}
.record-name{display:grid;min-width:100px;flex:1;overflow-wrap:anywhere}.record .row{justify-content:flex-end}.drag{cursor:grab}
.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics strong{display:block;font-size:1.7rem}
.batch-list{overflow:auto;display:grid;gap:.4rem;margin:.5rem 0}.batch-row{display:grid;grid-template-columns:96px 130px 75px 75px 85px 85px minmax(150px,1fr) auto;gap:.35rem;min-width:775px;align-items:center}
.batch-row textarea{min-height:42px}
.admin-page{font-size:17px}
.admin-page #app.admin{width:calc(100% - 48px);max-width:1800px;grid-template-columns:240px minmax(0,1fr);gap:24px;margin-top:24px}
.admin-page #app:not(.admin){max-width:480px;margin-top:8vh}
.admin-page h1{font-size:30px}.admin-page h2{font-size:24px}.admin-page h3{font-size:20px}
.admin-page small{font-size:14px}
.admin-page .sidebar{padding:18px;gap:9px;top:24px}
.admin-page button,.admin-page .button{min-height:46px;padding:10px 18px}
.admin-page input:not([type=checkbox]),.admin-page select{min-height:48px;padding:10px 13px}
.admin-page textarea{padding:12px 14px;line-height:1.65;min-height:130px}
.admin-page .panel{padding:26px;margin-bottom:20px}
.admin-page .record{gap:16px;padding:17px 0}.admin-page .record-name{gap:5px}
.admin-page .search{margin:18px 0}.admin-page .search select{max-width:160px}
.admin-page dialog{width:min(1200px,calc(100% - 64px));max-height:calc(100dvh - 48px);padding:26px}
.admin-page dialog>header{position:sticky;top:-26px;background:var(--paper);z-index:2;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:20px}
.admin-page .form-grid{gap:10px 24px}.admin-page .wide-field{grid-column:1/-1}
.admin-page .subpanel{padding:20px;margin:18px 0}.admin-page .subpanel .subpanel{padding:16px}
.admin-page .image-preview img{width:96px;height:96px}
.admin-page .batch-row{grid-template-columns:115px minmax(140px,1fr) 90px 95px 100px 110px minmax(210px,1.5fr) auto;gap:8px;min-width:1080px}
.admin-page .batch-row textarea{min-height:48px;padding:8px}
@media(max-width:1000px){
 .admin-page #app.admin{width:calc(100% - 32px);grid-template-columns:190px minmax(0,1fr);gap:16px}
 .admin-page .record{flex-wrap:wrap}.admin-page .record>.row{width:100%}
}
@media(max-width:760px){
 .admin-page{font-size:16px}.admin-page #app.admin{width:calc(100% - 20px);grid-template-columns:1fr;margin-top:10px;gap:12px}
 .admin-page .sidebar{padding:12px;gap:7px}.admin-page .panel{padding:16px}
 .admin-page dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:16px}
 .admin-page dialog>header{top:-16px}.admin-page .form-grid{grid-template-columns:1fr;gap:4px}
 .admin-page .subpanel{padding:14px}.admin-page button,.admin-page .button{padding:8px 12px}
}
@media(max-width:760px){
 .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .admin{grid-template-columns:1fr}.sidebar{position:static;display:flex;flex-wrap:wrap}.sidebar strong{width:100%}
 .site-head .site-links>a:not(.button){display:none}
 .bottom-nav{display:flex;position:fixed;inset:auto 0 0;justify-content:space-around;gap:.4rem;background:var(--paper);border-top:1px solid var(--line);padding:.65rem .35rem max(.65rem,env(safe-area-inset-bottom));z-index:1}
 .bottom-nav>*{font-size:.86rem}.bottom-nav .button{min-height:30px;padding:.15rem .35rem}
 .detail-sections{grid-template-columns:1fr}
}
@media(max-width:420px){
 #app{width:calc(100% - 16px);margin-top:9px}
 .reward-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
 .reward-card{padding:.4rem}.reward-card strong{font-size:.94rem}
 .form-grid{grid-template-columns:1fr}.record{flex-wrap:wrap}.record .row{justify-content:flex-start}
}
@media(max-width:320px){.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Desktop administration workspace */
.admin-page{background:#f3f6f8;--paper:#fff;--line:#dce6e7;--shadow:0 5px 20px #21464706}
.admin-page .sidebar{box-shadow:var(--shadow);border-radius:18px;padding:20px 14px}
.admin-page .sidebar strong{padding:8px 10px 20px;border-bottom:1px solid var(--line);margin-bottom:8px;font-size:18px}
.admin-page .sidebar button,.admin-page .sidebar a{background:transparent;border-color:transparent;color:#50686a;border-radius:9px}
.admin-page .sidebar [aria-pressed=true]{background:#e0f1eb;color:#155d50;font-weight:700;border-color:#c3dfd4;box-shadow:inset 4px 0 #33836d}
.admin-page .sidebar a{margin-top:10px;border-top:1px solid var(--line)}
.admin-page .sidebar button:hover,.admin-page .sidebar a:hover{background:#edf5f2}
.admin-page .admin-content{min-width:0;padding:8px 0}
.admin-page .admin-heading{padding:4px 2px 16px}.admin-page .admin-heading small{color:#598073;letter-spacing:1px}
.admin-page .admin-heading h1{margin:6px 0 8px}.admin-page .admin-heading p{font-size:15px}
.admin-page .admin-toolbar{padding-bottom:18px;border-bottom:1px solid var(--line);gap:12px}
.admin-page .admin-toolbar>strong{margin-right:auto;color:#56716b;font-size:16px}
.admin-page .search input{background:#f7fafb}.admin-page .admin-list{margin-top:20px}
.admin-page .record{padding:14px 16px;margin-bottom:10px;border:1px solid #e1e9eb;border-radius:12px;background:#fcfdfd}
.admin-page .record:hover{border-color:#a8c9c0;background:#f6fbf8}.admin-page .record .drag{color:#809b95;padding:8px}
.admin-page .record .row{gap:8px}.admin-page .record .row button{min-height:38px;padding:6px 14px;font-size:15px}
.admin-page .record .row button:first-of-type{border-color:#c6ddd6}
.admin-page .record-image{width:56px;height:56px;object-fit:cover;border-radius:12px;flex-shrink:0}
.admin-page .admin-pagination{justify-content:flex-end;padding-top:18px;margin-top:16px;border-top:1px solid var(--line)}
.admin-page dialog.editor-dialog{display:flex;flex-direction:column;height:min(860px,calc(100dvh - 48px));padding:0;overflow:hidden;border-radius:18px}
.admin-page .editor-dialog>header{position:static;flex-shrink:0;margin:0;padding:18px 26px;background:#f8fbfa;border-bottom:1px solid var(--line)}
.admin-page .editor-form{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.admin-page .editor-form>.prose{padding:0 24px;max-height:100px;overflow:auto}
.admin-page .editor-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:14px 24px;border-bottom:1px solid var(--line);background:#fff;flex-shrink:0}
.admin-page .editor-tabs button{border-radius:8px;min-height:40px;padding:7px 15px;font-size:16px;background:#f5f8f7}
.admin-page .editor-tabs [aria-pressed=true]{background:#e0f1eb;border-color:#97c7b5;color:#175f4e;font-weight:700}
.admin-page .editor-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 28px}
.admin-page .editor-pane>h3{font-size:21px;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.admin-page .editor-pane .subpanel:first-of-type{margin-top:0}
.admin-page .check-field{display:flex;align-items:center;justify-content:space-between;align-self:start;min-height:48px;padding:12px 14px;background:#f4f8f6;border:1px solid var(--line);border-radius:9px;font-weight:500}
.admin-page .editor-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;text-align:left;padding:16px 26px;border-top:1px solid var(--line);background:#f8fbfa;flex-shrink:0}
.admin-page .editor-footer>[role=status]{flex:1 1 100%;margin:0}.admin-page .editor-footer>[role=status]:empty{display:none}
.admin-page .editor-footer>span{margin-right:auto;font-size:14px}.admin-page .editor-footer>button{min-width:180px}
@media(max-width:760px){
 .admin-page .sidebar strong{width:100%;padding-bottom:12px}.admin-page .sidebar a{margin-top:0;border:0}
 .admin-page .admin-toolbar{gap:8px}.admin-page .admin-toolbar>strong{width:100%}
 .admin-page dialog.editor-dialog{height:calc(100dvh - 20px)}
 .admin-page .editor-dialog>header{padding:12px 16px}.admin-page .editor-tabs{padding:12px;gap:6px}
 .admin-page .editor-tabs button{font-size:14px;padding:6px 10px;min-height:36px}
 .admin-page .editor-body{padding:18px 16px}.admin-page .editor-footer{padding:12px 16px}
 .admin-page .editor-footer>span{display:none}.admin-page .editor-footer>button{width:100%}
 .admin-page .record{padding:12px}.admin-page .admin-pagination{justify-content:center}
}