*{box-sizing:border-box;margin:0;padding:0;}
html,body,#root{height:100%;width:100%;}
.app{display:flex;height:100vh;overflow:hidden;background:#F5EFE0;font-family:'Nunito',Georgia,serif;}
.sidebar{width:272px;min-width:272px;background:#DDD0B0;border-right:4px solid #3B2A1A;display:flex;flex-direction:column;overflow:hidden;}
.sidebar-header{padding:16px 14px 13px;border-bottom:3px solid #C8AA80;background:#8B5E3C;display:flex;align-items:flex-start;justify-content:space-between;}
.dark-toggle{background:none;border:2px solid rgba(249,244,232,.35);border-radius:8px;color:#F9F4E8;cursor:pointer;font-size:15px;line-height:1;padding:4px 7px;transition:background .15s;}
.dark-toggle:hover{background:rgba(249,244,232,.15);}
.sidebar-title{font-family:'Fredoka One',Georgia,serif;font-size:22px;color:#F9F4E8;letter-spacing:.04em;}
.sidebar-subtitle{font-size:10px;color:#F5C890;margin-top:3px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.game-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;}
.game-item{padding:10px 12px;cursor:pointer;background:rgba(139,94,60,.07);border:2.5px solid rgba(139,94,60,.18);border-radius:13px;transition:all .15s;position:relative;}
.game-item:hover{background:rgba(139,94,60,.14);border-color:rgba(139,94,60,.3);}
.game-item.active{background:#F9F4E8;border:3px solid #3B2A1A;box-shadow:3px 3px 0 #3B2A1A;}
.game-name{font-size:14px;font-weight:800;color:#3B2A1A;padding-right:52px;}
.game-meta{font-size:11px;color:#6B4F35;margin-top:2px;font-weight:600;}
.game-item.active .game-meta{color:#9B7A5A;}
.item-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.game-item:hover .item-actions,.game-item.active .item-actions{opacity:1;}
.icon-btn{width:26px;height:26px;border-radius:8px;border:2px solid;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800;transition:all .12s;}
.icon-btn-edit{background:#EDE3CB;border-color:#C8AA80;color:#6B4F35;}
.icon-btn-edit:hover{background:#C49A6C;border-color:#8B5E3C;color:#3B2A1A;}
.icon-btn-del{background:#F5E0E0;border-color:#C08080;color:#8B2020;}
.icon-btn-del:hover{background:#8B2020;border-color:#8B2020;color:#fff;}
.badge{display:inline-block;font-size:10px;padding:3px 9px;border-radius:20px;font-weight:800;margin-top:5px;border:2px solid;letter-spacing:.04em;text-transform:uppercase;}
.badge-unplayed{background:#EDD9C0;color:#8B5E3C;border-color:#8B5E3C;}
.badge-played{background:#D6E8CC;color:#5A7A4A;border-color:#5A7A4A;}
.add-game-btn{margin:10px 8px;padding:11px;background:#8B5E3C;color:#F9F4E8;border:3px solid #3B2A1A;border-radius:14px;font-size:14px;cursor:pointer;font-family:'Fredoka One',Georgia,serif;letter-spacing:.04em;box-shadow:3px 3px 0 #3B2A1A;transition:all .12s;}
.add-game-btn:hover{background:#6B4F35;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #3B2A1A;}
.add-game-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #3B2A1A;}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#F5EFE0;}
.main-header{padding:14px 20px;background:#EDE3CB;border-bottom:4px solid #3B2A1A;display:flex;align-items:center;justify-content:space-between;}
.main-title{font-family:'Fredoka One',Georgia,serif;font-size:22px;color:#3B2A1A;}
.main-subtitle{font-size:12px;color:#6B4F35;margin-top:2px;font-weight:700;}
.add-session-btn{padding:9px 16px;background:#8B5E3C;color:#F9F4E8;border:3px solid #3B2A1A;border-radius:14px;font-size:14px;cursor:pointer;font-family:'Fredoka One',Georgia,serif;box-shadow:3px 3px 0 #3B2A1A;transition:all .12s;white-space:nowrap;}
.add-session-btn:hover{background:#6B4F35;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #3B2A1A;}
.add-session-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #3B2A1A;}
.stats-row{display:flex;background:#EDE3CB;border-bottom:3px solid #DDD0B0;}
.stat-box{flex:1;text-align:center;padding:10px 6px;border-right:2px solid #DDD0B0;}
.stat-box:last-child{border-right:none;}
.stat-val{font-family:'Fredoka One',Georgia,serif;font-size:20px;color:#8B5E3C;}
.stat-lbl{font-size:9px;color:#9B7A5A;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-top:1px;}
.sessions-area{flex:1;overflow-y:auto;padding:16px 20px;}
.empty-state{text-align:center;color:#9B7A5A;font-style:italic;margin-top:60px;font-size:15px;font-weight:700;}
.session-card{background:#F9F4E8;border:3px solid #3B2A1A;border-radius:16px;padding:14px 16px;margin-bottom:14px;box-shadow:4px 4px 0 #3B2A1A;}
.session-top{display:flex;align-items:center;gap:8px;}
.session-date{font-size:12px;color:#9B7A5A;font-weight:800;text-transform:uppercase;letter-spacing:.07em;}
.session-rating{color:#C49A6C;font-size:16px;flex:1;}
.session-info{font-size:13px;color:#6B4F35;margin-top:6px;font-weight:700;}
.session-note{font-size:13px;color:#3B2A1A;margin-top:8px;font-style:italic;border-left:4px solid #C49A6C;padding-left:10px;font-weight:600;}
.session-actions{display:flex;gap:4px;}
.no-game{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#9B7A5A;font-size:16px;font-weight:700;gap:10px;}
.modal-overlay{position:fixed;inset:0;background:rgba(40,25,10,.55);display:flex;align-items:center;justify-content:center;z-index:100;}
.modal{background:#F9F4E8;border:4px solid #3B2A1A;border-radius:20px;padding:24px 26px;width:430px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:6px 6px 0 #3B2A1A;}
.modal-title{font-family:'Fredoka One',Georgia,serif;font-size:20px;color:#3B2A1A;margin-bottom:18px;border-bottom:3px solid #DDD0B0;padding-bottom:10px;}
.form-group{margin-bottom:14px;}
.form-label{font-size:11px;color:#6B4F35;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;display:block;}
.form-input{width:100%;padding:9px 12px;background:#FBF7EE;border:2.5px solid #C8AA80;border-radius:10px;font-size:14px;color:#3B2A1A;font-family:'Nunito',Georgia,serif;font-weight:700;}
.form-input:focus{outline:none;border-color:#8B5E3C;box-shadow:0 0 0 3px rgba(139,94,60,.18);}
.form-input.error{border-color:#8B2020;box-shadow:0 0 0 3px rgba(139,32,32,.15);}
textarea.form-input{resize:vertical;min-height:72px;}
.form-row{display:flex;gap:10px;}
.form-row .form-group{flex:1;}
.error-msg{font-size:12px;color:#8B2020;font-weight:800;margin-top:5px;padding:6px 10px;background:#F5E0E0;border-radius:8px;border:1.5px solid #C08080;}
.btn-row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
.btn-cancel{padding:9px 18px;background:#EDE3CB;border:2.5px solid #C8AA80;border-radius:12px;color:#6B4F35;cursor:pointer;font-family:'Fredoka One',Georgia,serif;font-size:15px;box-shadow:2px 2px 0 #C8AA80;}
.btn-save{padding:9px 22px;background:#8B5E3C;border:2.5px solid #3B2A1A;border-radius:12px;color:#F9F4E8;cursor:pointer;font-family:'Fredoka One',Georgia,serif;font-size:15px;box-shadow:3px 3px 0 #3B2A1A;transition:all .12s;}
.btn-save:hover{background:#6B4F35;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #3B2A1A;}
.btn-save:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #3B2A1A;}
.btn-danger{padding:9px 22px;background:#8B2020;border:2.5px solid #3B2A1A;border-radius:12px;color:#fff;cursor:pointer;font-family:'Fredoka One',Georgia,serif;font-size:15px;box-shadow:3px 3px 0 #3B2A1A;transition:all .12s;}
.btn-danger:hover{background:#6A1616;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #3B2A1A;}
.star-selector{display:flex;align-items:center;gap:8px;margin-top:4px;}
.star-display{font-size:20px;color:#C49A6C;letter-spacing:2px;min-width:110px;}
.star-input{flex:1;accent-color:#8B5E3C;}
.search-modal .star-input{flex:none;width:100%;display:block;height:28px;cursor:pointer;margin-top:4px;}
.star-val{font-size:15px;color:#8B5E3C;font-weight:800;min-width:32px;font-family:'Fredoka One',serif;}
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,.08);border-radius:4px;}
::-webkit-scrollbar-thumb{background:#C49A6C;border-radius:4px;}
.export-btn{margin:0 8px 6px;padding:8px;background:#EDE3CB;color:#6B4F35;border:2.5px solid #C8AA80;border-radius:14px;font-size:13px;cursor:pointer;font-family:'Fredoka One',Georgia,serif;letter-spacing:.04em;box-shadow:2px 2px 0 #C8AA80;transition:all .12s;}
.export-btn:hover{background:#DDD0B0;transform:translate(-1px,-1px);box-shadow:3px 3px 0 #C8AA80;}
.export-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #C8AA80;}
.search-shelf-btn{margin:0 8px 10px;padding:11px;background:#EDE3CB;color:#3B2A1A;border:3px solid #3B2A1A;border-radius:14px;font-size:14px;cursor:pointer;font-family:'Fredoka One',Georgia,serif;letter-spacing:.04em;box-shadow:3px 3px 0 #3B2A1A;transition:all .12s;}
.search-shelf-btn:hover{background:#DDD0B0;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #3B2A1A;}
.search-shelf-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #3B2A1A;}
.search-modal{width:480px;}
.search-status-row{display:flex;gap:6px;margin-top:4px;}
.search-status-btn{flex:1;padding:7px 10px;background:#EDE3CB;border:2.5px solid #C8AA80;border-radius:10px;color:#6B4F35;cursor:pointer;font-family:'Fredoka One',Georgia,serif;font-size:13px;transition:all .12s;}
.search-status-btn.active{background:#8B5E3C;border-color:#3B2A1A;color:#F9F4E8;box-shadow:2px 2px 0 #3B2A1A;}
.search-status-btn:not(.active):hover{background:#DDD0B0;}
.search-results-divider{display:flex;align-items:center;gap:10px;margin:16px 0 10px;font-size:11px;color:#9B7A5A;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
.search-results-divider::before,.search-results-divider::after{content:'';flex:1;height:2px;background:#DDD0B0;border-radius:2px;}
.search-results{height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.search-result-item{padding:10px 12px;background:#F5EFE0;border:2.5px solid #C8AA80;border-radius:12px;cursor:pointer;transition:all .15s;}
.search-result-item:hover{background:#EDE3CB;border-color:#8B5E3C;box-shadow:2px 2px 0 #3B2A1A;}
.search-result-name{font-size:14px;font-weight:800;color:#3B2A1A;}
.search-result-meta{font-size:11px;color:#6B4F35;font-weight:600;margin-top:2px;display:flex;gap:4px;}
.search-no-results{text-align:center;color:#9B7A5A;font-style:italic;font-size:13px;font-weight:700;padding:20px 0;}
.game-last-played{font-size:10px;color:#9B7A5A;font-weight:700;margin-top:4px;}
.game-item-rating{font-size:11px;color:#8B5E3C;font-weight:800;margin-left:8px;}
.session-rating-val{font-size:13px;font-weight:800;color:#8B5E3C;}
.sidebar-empty{padding:16px 6px;font-size:12px;color:#9B7A5A;font-weight:700;text-align:center;line-height:1.6;}
.delete-msg{color:#3B2A1A;font-size:14px;font-weight:700;margin-bottom:20px;line-height:1.5;}
.half-star{position:relative;display:inline-block;}
.half-star::before{content:'★';position:absolute;left:0;width:50%;overflow:hidden;}

/* ===== DARK MODE ===== */
html.dark .app{background:#1C1510;}
html.dark .sidebar{background:#231B12;border-right-color:#5A3E28;}
html.dark .sidebar-header{background:#2D2018;border-bottom-color:#5A3E28;}
html.dark .game-item{background:rgba(196,154,108,.07);border-color:rgba(196,154,108,.18);}
html.dark .game-item:hover{background:rgba(196,154,108,.13);border-color:rgba(196,154,108,.32);}
html.dark .game-item.active{background:#2A1E14;border-color:#C49A6C;box-shadow:3px 3px 0 #5A3E28;}
html.dark .game-name{color:#F0E6D0;}
html.dark .game-meta{color:#C4A47C;}
html.dark .game-item.active .game-meta{color:#A08060;}
html.dark .game-last-played{color:#7A6045;}
html.dark .icon-btn-edit{background:#332416;border-color:#5A3E28;color:#C4A47C;}
html.dark .icon-btn-edit:hover{background:#5A3E28;border-color:#C49A6C;color:#F0E6D0;}
html.dark .icon-btn-del{background:#2D1616;border-color:#6B3030;color:#C07070;}
html.dark .icon-btn-del:hover{background:#6B2020;border-color:#8B2020;color:#fff;}
html.dark .badge-unplayed{background:#2D2018;color:#C49A6C;border-color:#5A3E28;}
html.dark .badge-played{background:#1A2D18;color:#6AAA50;border-color:#3A6A30;}
html.dark .add-game-btn{background:#5A3E28;border-color:#C49A6C;box-shadow:3px 3px 0 #1C1510;}
html.dark .add-game-btn:hover{background:#4A3220;box-shadow:4px 4px 0 #1C1510;}
html.dark .export-btn{background:#2A1E14;color:#C4A47C;border-color:#5A3E28;box-shadow:2px 2px 0 #1C1510;}
html.dark .export-btn:hover{background:#332416;box-shadow:3px 3px 0 #1C1510;}
html.dark .search-shelf-btn{background:#2A1E14;color:#F0E6D0;border-color:#5A3E28;box-shadow:3px 3px 0 #1C1510;}
html.dark .search-shelf-btn:hover{background:#332416;box-shadow:4px 4px 0 #1C1510;}
html.dark .main{background:#1C1510;}
html.dark .main-header{background:#231B12;border-bottom-color:#5A3E28;}
html.dark .main-title{color:#F0E6D0;}
html.dark .main-subtitle{color:#C4A47C;}
html.dark .stats-row{background:#231B12;border-bottom-color:#3D2A1A;}
html.dark .stat-box{border-right-color:#3D2A1A;}
html.dark .stat-val{color:#C49A6C;}
html.dark .stat-lbl{color:#7A6045;}
html.dark .empty-state{color:#7A6045;}
html.dark .session-card{background:#2A1E14;border-color:#5A3E28;box-shadow:4px 4px 0 #1C1510;}
html.dark .session-date{color:#7A6045;}
html.dark .session-info{color:#C4A47C;}
html.dark .session-note{color:#F0E6D0;border-left-color:#C49A6C;}
html.dark .no-game{color:#7A6045;}
html.dark .modal-overlay{background:rgba(0,0,0,.72);}
html.dark .modal{background:#2A1E14;border-color:#5A3E28;box-shadow:6px 6px 0 #1C1510;}
html.dark .modal-title{color:#F0E6D0;border-bottom-color:#3D2A1A;}
html.dark .form-label{color:#C4A47C;}
html.dark .form-input{background:#181210;border-color:#5A3E28;color:#F0E6D0;}
html.dark .form-input:focus{border-color:#C49A6C;box-shadow:0 0 0 3px rgba(196,154,108,.2);}
html.dark textarea.form-input{color:#F0E6D0;}
html.dark .error-msg{color:#C07070;background:#2D1616;border-color:#6B3030;}
html.dark .btn-cancel{background:#332416;border-color:#5A3E28;color:#C4A47C;box-shadow:2px 2px 0 #1C1510;}
html.dark .btn-cancel:hover{background:#3D2A1A;}
html.dark .star-val{color:#C49A6C;}
html.dark .search-status-btn{background:#2A1E14;border-color:#5A3E28;color:#C4A47C;}
html.dark .search-status-btn:not(.active):hover{background:#332416;}
html.dark .search-results-divider{color:#7A6045;}
html.dark .search-results-divider::before,html.dark .search-results-divider::after{background:#3D2A1A;}
html.dark .search-result-item{background:#231B12;border-color:#5A3E28;}
html.dark .search-result-item:hover{background:#2A1E14;border-color:#C49A6C;box-shadow:2px 2px 0 #1C1510;}
html.dark .search-result-name{color:#F0E6D0;}
html.dark .search-result-meta{color:#C4A47C;}
html.dark .search-no-results{color:#7A6045;}
html.dark ::-webkit-scrollbar-track{background:rgba(0,0,0,.25);}
html.dark ::-webkit-scrollbar-thumb{background:#5A3E28;}
html.dark .sidebar-empty{color:#7A6045;}
html.dark .game-item-rating{color:#C49A6C;}
html.dark .session-rating-val{color:#C49A6C;}
html.dark .delete-msg{color:#F0E6D0;}

/* ===== AUTH SCREEN ===== */
.auth-screen{display:flex;align-items:center;justify-content:center;height:100vh;background:#F5EFE0;}
.auth-card{background:#F9F4E8;border:4px solid #3B2A1A;border-radius:20px;padding:32px 28px;width:380px;max-width:95vw;box-shadow:6px 6px 0 #3B2A1A;}
.auth-title{font-family:'Fredoka One',Georgia,serif;font-size:26px;color:#3B2A1A;text-align:center;margin-bottom:4px;}
.auth-subtitle{font-size:13px;color:#6B4F35;font-weight:700;text-align:center;margin-bottom:22px;}
.auth-logout{background:none;border:none;color:#6B4F35;cursor:pointer;font-size:12px;font-weight:700;padding:4px 6px;}
html.dark .auth-screen{background:#1C1510;}
html.dark .auth-card{background:#2A1E14;border-color:#C49A6C;box-shadow:6px 6px 0 #1C1510;}
html.dark .auth-title{color:#F0E6D0;}
html.dark .auth-logout{color:#C4A47C;}

/* ===== MOBILE (≤640px) ===== */
.back-btn{display:none;}

@media(max-width:640px){
  /* Panel-switch: sidebar and main fill the full viewport;
     CSS slides between them based on .game-selected on .app */
  .app{position:relative;overflow:hidden;height:100dvh;}
  .sidebar{position:absolute;inset:0;width:100%;min-width:unset;transform:translateX(0);transition:transform .22s ease;overflow-y:auto;z-index:1;}
  .main{position:absolute;inset:0;width:100%;transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;}
  .app.game-selected .sidebar{transform:translateX(-100%);}
  .app.game-selected .main{transform:translateX(0);}

  /* Back button — visible on mobile only */
  .back-btn{display:block;background:none;border:none;color:#6B4F35;font-size:14px;font-weight:800;cursor:pointer;padding:0;margin-bottom:10px;font-family:'Nunito',Georgia,serif;}
  html.dark .back-btn{color:#C4A47C;}

  /* Touch targets */
  .icon-btn{width:40px;height:40px;font-size:15px;}
  .item-actions{opacity:1;} /* always visible — no hover on touch */

  /* Main header: stack title and Add Session button vertically */
  .main-header{flex-direction:column;align-items:flex-start;gap:8px;}
  .add-session-btn{width:100%;}

  /* Form rows in modals: stack fields vertically */
  .form-row{flex-direction:column;gap:0;}

  /* Modal: tighter padding on small screens */
  .modal{padding:20px 16px;max-height:85dvh;}
}